Vue3的生命周期流程图
2024-02-08 14:45:38 0 举报Vue3 生命周期
作者其他创作
大纲/内容
beforeCreate
app = Vue.createApp(options)app.mount(el)
此时：vm中所有的： data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。
创建app.$el并添加至el
此时： 1.页面呈现的是未经Vue编译的DOM结构； 2.所有对DOM的操作，最终都不奏效。
beforeUpdate
此时：数据是新的，页面也是新的，即：页面和数据保持同步
当调用了 app.unmount()
此时： 1.页面中呈现的是经过Vue编译的DOM; 2.对DOM的操作均有效（尽可能避免）。 至此，初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。。
初始化 注入&响应性
mounted
根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即：完成了Model->View的更新。
此时： 数据是新的，但页面是旧的，即：页面尚未和数据保持同步。
已挂载
有
编译 el 的innerHTML 至模板
updated
编译模板 至渲染函数
将内存中的虚拟DOM转为真实DOM插入页面。
初始化 事件&生命周期
when data changes
当数据发生变化
created
完全销毁一个实例。清理它与其它实例的连接，解绑它是全部指令及事件监听器（原生DOM事件仍在，自定义事件没了）
此时：无法通过vm访问到data中的数据、methods中的方法
虚拟DOM 重新渲染和更新
unmouted
此时：可以通过vm访问到data中的数据、methods中的方法
beforeMount
是否有 “template”选项？
没有
beforeUnmount
0 条评论
下一页
