Vue生命周期示意图
2021-09-24 08:55:31 0 举报
Vue生命周期示意图
作者其他创作
大纲/内容
销毁前
initEvents & Lifecycle初始化了事件和生命周期
YES有
挂载前
whenvm.$destroy()is called当执行 销毁 命令时进入下一阶段vm.$destroy()用于销毁实例
beforeMount
销毁阶段通常在 beforeDestroy 阶段，会进行比如清掉定时器/websocket长连接断开/js原生的事件监听/引入地图插件等
whenvm.$mount(el)is called查询是否有 vm.$mount()这个属性如果没有则直接中断整个流程
created/beforeMount/mounted都可以做数据请求
创建阶段因为在beforCreate中无法获取 data 和 methods ，所以不能对其做数据请求
创建后
Has \"template\" option?检查是否有 template选项
创建前在这里并不能获得任何数据
更新后请勿在此进行修改数据，否则会造成死循环
NO没有
Create vm.$eland replace\"el\" with it使用真实DOM替换虚拟DOM
initinjections & reactivity初始化了注入和响应式（data和methods等）
挂载后
beforeDestroy
Created
beforeCreate
销毁后
只有创建阶段和挂载阶段的生命周期是会自动执行的生命周期的执行顺序和书写顺序无关
Mounted
Destroyed
Compile el's outerHTML as template *渲染页面内容
挂载阶段
Updated
new Vue（）
Compile template into render function *渲染 template 中的东西添加至 render 函数中，并在HTML 中渲染出来
更新阶段beforeUpdate和updated是在数据发生改变时触发 数据是在beforeUpdate之前改变的
beforeUpdate
更新前
Has \"el\" option?检查是否有 el 选项
when datachanges
创建Vue实例
Virtual DOMre-renderand patch虚拟DOM重新编译
收藏
0 条评论
回复 删除
下一页
