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 条评论
下一页