Vue生命周期图示
2022-06-13 16:12:24 0 举报Vue生命周期图示详细说明
作者其他创作
大纲/内容
实例挂载之前此时：1. 页面呈现的还是未经Vue编译的DOM结构2.所有对DOM的此操作，最终都会被之后的流程替换掉
当数据发生改变
移除所有监视（数据监测），子组件和事件监听器（自定义事件）。font color=\"#f44336\
初始化：数据监测、数据代理
实例销毁之前：此时：vm中的data、methods、指令等等都是可用状态，马上要执行销毁过程，一般在此阶段关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
销毁流程
更新前此时：数据已经更新，但是页面未更新，页面尚未和数据同步
将内存中的虚拟DOM(VNode)转为真实DOM替换掉el容器，并且会将这个真实DOM存在this.$el中
更新完成：此时：数据和页面同步到最新
实例挂载完成至此，初始化过程结束此时：1. 页面中呈现的是经过Vue编译的DOM2. 可以对DOM进行操作3. 一般可以在此进行：开启定时器，发送网络请求，订阅消息，绑定事件等初始化操作
没有传入则等待vm.$mount调用后能接收到要挂载的DOM容器
数据监测，代理创建完成后此时： vm可以访问到data，methods
挂载流程结束
此阶段Vue开始解析模板，生成虚拟DOM(VNode 在内存中 )，页面还不能显示解析好的内容。这个阶段完成后就可以访问到vm.$el
判断是否有传入el 选项
创建数据监测，代理之前此时：无法通过vm 访问到data中的数据、methods中的方法
销毁完毕
根据新数据，生成新的虚拟DOM，随后和旧的虚拟DOM进行比较，最终完成页面更新，即：完成了Model => View 的更新
判断是否传入template选项
初始化：事件、生命周期
当调用vm.$destroy()方法，将进入实例销毁流程进入销毁流程后，将不再触发更新流程
更新流程
0 条评论
下一页
