Vue的生命周期
2023-02-17 21:43:01 14 举报Vue的生命周期
作者其他创作
大纲/内容
此阶段Vue开始解析模板，生成虚拟DOM(内存中)，页面还不能显示解析好的内容
when data changes
Has \"el\" option
new Vue()
此时： 1.页面中呈现的是经过Vue编译的DOM 2.对DOM的操作均有效(尽可能避免)。此时初始化过程已经结束 3.这时可以进行开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作
Has \"template\" option
No
是否设置了el挂载属性
mounted
created
此时： 1.页面呈现的是未经编译的DOM结构 2.所有对DOM的操作，最终都不会有效果
beforMount
Yes
销毁vm
此时：数据是新的，但页面是旧的，即：页面尚未和数据保持同步
beforeDestroy
根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新
Compile template into render function
Destroyed
destroyed
update
when vm.$mount(el) is called
初始化数据监测和数据代理
when vm.$destroy() iscalled
beforeCreate
将内存中的虚拟DOM转为真实DOM插入页面
Compile el outerHTML as template
此时：数据是新的，但页面也是新的，即：页面和数据保持同步
此时：vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
Initinjections & reactivity
手动调用时
Create vm.$el and replace \"el\" with it
此时：可以通过vm访问data中的数据、method中的配置方法
Teardown watchers child components and event listeners
Virtual DOM re-render and patch
此时：无法通过vm访问到data中的数据和methods中的方法
初始化生命周期和事件、但这时数据代理还未开始
Mounted
是否设置了template模板属性
beforeUpdate
只把template中的内容作为模板解析
InitEvents & Lifecycle
把整个html作为模板解析
0 条评论
下一页
