浅谈Vue的生命周期

拾一路芳华

已于 2022-04-14 23:43:30 修改

阅读量793

点赞数 2

分类专栏： Vue学习文章标签： vue javascript

于 2022-04-14 23:38:39 首次发布

本文链接：https://blog.csdn.net/No_cookie/article/details/124181362

版权

Vue学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、Vue的生命周期是什么？

Vue实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载dom到渲染、更新到渲染、卸载(销毁)等一系列过程，我们称这是Vue的生命周期。

二、Vue的生命周期有哪些？

1.beforeCreate（组件实例被创建之初，通常用于插件开发中执行一些初始化任务）
此时无法通过vm(Vue实例)访问到data中的数据、methods中的方法
↓
初始化：数据监测、数据代理
↓
2.created（组件实例已经完全创建，各种数据可以使用，常用于异步数据获取）
此时可以通过vm访问到data中的数据、methods中配置的方法、可以通过conputed和watch完成数据计算
此时vm.$el并没有被创建
↓
1.判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译
2.判断是否有template选项，优先级是render>template>outerHTML
此阶段Vue开始解析模板，生成虚拟DOM到内存中，页面还不能显示解析好的内容
↓
3.beforeMount（组件挂载之前，未执行渲染、更新，dom未创建）
此时页面呈现的是未经Vue编译的DOM结构
此时可以操作DOM，但是最终都不奏效，因为下一步会直接将内存中的虚拟DOM转为转为真实DOM插入到页面
↓
将内存中的虚拟DOM转为转为真实DOM插入到页面
↓
4.mounted（组件挂载到实例上去之后，dom已创建，可用于获取访问数据和dom元素）
此时页面中呈现的是经过Vue编译的DOM，至此初始化过程结束，一般在此进行：发送ajax请求、开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作
5.beforeUpdate（组件数据发生变化，更新之前，可用于获取更新前各种状态）
此时view层还未更新（页面尚未和数据保持同步，也就是说数据是新的，但页面是旧的）
若在beforeUpdate中再次修改数据，不会再次触发更新方法
↓
根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即完成了Model -> View的更新
↓
6.updated（组件数据更新之后）
此时完成view层的更新（页面和数据保持同步，数据是新的，页面也是新的）
若在updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated）
7.beforeDestroy（组件实例销毁之前）
此时vm中所有的data、methods、指令等等都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
8.destroyed（组件实例销毁之后）
完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
并不能清除DOM，仅仅销毁实例