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 条评论
下一页
为你推荐
查看更多