VUE 生命周期
2022-04-16 20:54:00 78 举报Vue生命周期详解
作者其他创作
大纲/内容
NO
created
beforeMount
updated
Destroyed
Compile templateintorender function *
beforeUpdate
YES
初始化：数据监测、数据代理。
初始化：生命周期、事件、但数据代理未开始。
whenvm.$destroy()is called
此时：无法通过vm访问到data中的数据、methods中的方法。
when vm.$mount(el) is called
将内存中的虚拟DOM转为真实DOM插入页面
new Vue()
1. 页面中呈现的是经过Vue编译的DOM。2. 对DOM的操作均有效（尽可能避免）。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。
此时：可以通过vm访问到data中的数据、methods中的方法。
mounted
Initinjections & reactivity
Virtual DOMre-renderand patch
此阶段Vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容。
生成新虚拟DOM，与旧虚拟DOM进行比较，完成页面更新。
when datachanges
Create vm.$eland replace\"el\" with it
Mounted
1. 页面呈现的是未经Vue编译的DOM结构。2. 所有对DOM的操作，最终都不奏效。
此时数据是新的，页面也是新的，页面和数据保持同步。
此时数据是新的，页面是旧的，页面没有和数据保持同步。
Has\"template\" option
destroyed
Has\"el\" option
Compile el'souterHTMLas template *
beforeCreate
beforeDestroy
InitEvents & Lifecycle
0 条评论
下一页
