Vue生命周期流程图
2024-01-13 12:52:03 0 举报vue生命周期: beforeMount、mounted、beforeCreate、created、beforeUpdate、updated、beforeDestroy、destroyed
作者其他创作
大纲/内容
此时： 1.页面中呈现的是经过Vue编译的DOM; 2.对DOM的操作均有效（尽可能避免）。 至此，初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。。
此时：可以通过vm访问到data中的数据、methods中的方法
此时：vm中所有的： data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。
created
此阶段Vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容
new Vue()
beforeDestroy
Container
Destroyed
初始化：生命周期、事件，但数据代理还未开始
Has \"template\" option ?
此时：无法通过vm访问到data中的数据、methods中的方法
when data changes
NO
when vm.$mount(el) is called
beforeMount
Virtual DOM re-render and patch
mounted
updated
此时： 1.页面呈现的是未经Vue编译的DOM结构； 2.所有对DOM的操作，最终都不奏效。
when vm.$destory() is called
Init Events & Lifecycle
Init injections & reactivity
beforeCreate
将内存中的虚拟DOM转为真实DOM插入页面。
YES
完全销毁一个实例。清理它与其它实例的连接，解绑它是全部指令及事件监听器（原生DOM事件仍在，自定义事件没了）
初始化：数据监视、数据代理
Compile vm.$el and replace \"el\" with it
Compile el's outerHTML as tempalte *
Has \"el\" option?
Compile template into render function *
此时： 数据是新的，但页面是旧的，即：页面尚未和数据保持同步。
beforeUpdate
Mounted
此时：数据是新的，页面也是新的，即：页面和数据保持同步
根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即：完成了Model->View的更新。
0 条评论
下一页
