Vue生命周期原理图
2024-09-04 16:20:18 0 举报
Vue生命周期原理图
作者其他创作
大纲/内容
created
此阶段Vue开始解析模板，生成虚拟DOM（内存中），此时页面还不能显示解析好的内容
Mounted
Has'el' option?
beforeCreate
Has'template' option?
vm挂载完毕
updated
vm挂载之前
vm销毁之前
Vue 生命周期原理图
No
此时：可以通过vm访问到data中的数据，methods中的方法
beforeMount
vm的数据监测和数据代理创建之前
Compile templateIntorender function *
Create vm.$el and replace \"el\" with it
whenvm.$destroy()is called
when data changes
vm销毁完毕
此时：数据也是新的，页面也是新的，即：页面和数据保持同步
NO
whenvm.$mount(el)is called
初始化：生命周期、事件，但数据代理还未开始
此时：无法通过vm访问到data中的数据，methods中的方法
Destroyed
此时： 1.页面中呈现的是经Vue编译的DOM结构。 2.所有对DOM的操作均有效（尽可能避免）。至此初始化结束，一般在此进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件，等初始化操作。
此时：数据是新的，但页面时旧的，即页面尚未和数据保持同步
vm的数据监测和数据代理创建完毕
Yes
vm更新之前
初始化：数据监测，数据代理
根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最后完成页面更新，即：完成了Model → View 的更新
此时： 1.页面中呈现的是未经Vue编译的DOM结构。 2.所有对DOM的操作，最终都不奏效。
InitInjections & Reactivity
Virtual DOMre-render and patch
destroyed
Compile el`souterHTMLas template *
此时： vm中所有的：data，methods，指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段进行：关闭定时器，取消订阅消息，解绑自定义事件，等收尾操作。
mounted
beforeUpdate
new Vue()
vm更新完毕
beforeDestroy
InitEvent & Lifecycle
收藏
0 条评论
回复 删除
下一页
