Vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。对应的8个生命周期钩子函数:
- beforeCreate、created、
- beforeMount、mounted、
- beforeUpdate、updated、
- beforeDestroy、destroyed
Vue的生命周期图示(官方中文文档)
(以下图片转自coderwhy老师,帮助理解 Vue生命周期)
Vue的生命周期过程详解(主要以钩子函数为主线)
1、beforeCreate:
实例组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行 beforeCreate 钩子函数,数据和 dom 都未初始化(取不到),一般不做任何操作。
2、created:
挂载数据,绑定事件已完成,然后执行created函数,这个时候已经可以操作数据, 而且不会触发 updated 函数,一般在这里做初始数据的获取(相比在 beforeMount 获取数据页面渲染速度较快)。
3、beforeMount:
执行这个函数前,虚拟dom 创建完成,真实 dom未完成挂载。这里更改数据不会触发 updated ,在这里也可以做初始数据的获取。
4、mounted:
执行 mounted 钩子函数前,数据、真实dom都已经处理好了,事件也挂载好了,一般在这里初始化一些操作真实 dom 的方法。
5、beforeUpdate:
当组件或实例的数据更改,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。可以监听到 data 变化,但view层的数据还没有变化。一般不做任何操作。
6、updated:
view层的数据重新渲染完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom
7、beforeDestroy:
当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、数据和事件的监听等。
8、destroyed:
组件的数据绑定、事件监听清除后只剩下dom空壳,这个时候,执行 destroyed 彻底销毁实例,如果在 beforeDestroy 没有做善后工作,在这里做善后工作也可以。
注:掌握各个钩子函数执行时的环境,并在项目开发中正确使用显得尤为重要,能避免一些基础的bug。
参考文章:
vue 生命周期 详解
Vue.js 中文文档
Vue生命周期