什么是生命周期
从vue实例创建、运行、到销毁整个过程,总是伴随着各种各样的事件,这些事件统称为生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。
1.实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作
2.挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
3.接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
4.接下来开始render,渲染出真实dom,然后执行mounted钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom等事情…
5.当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做什么事儿
6.当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom
7.当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等
8.组件的数据绑定、监听去掉后只剩下dom空壳,这个时候,执行destroyed,在这里做善后工作也可以
生命周期钩子 = 生命周期函数 = 生命周期事件
生命周期分类
Vue生命周期图
创建时期的生命周期事件
beforeCreate(){ }:表示在vue实例刚创建出来,还没有初始化data和methods中的数据。在这个时候无法调用data和methods中的数据;
created(){ }:表示vue已经初始化成功,data和methods也已经创建成功,可以调用里面的数据;
beforeMount(){ }:表示模板字符串已经在内存中编译好了,但还没有挂载到页面上,页面上还是原来的数据;
mounted(){ }:将已经编译好的模板挂载到页面上;
运行期间的生命周期事件
beforeUpdate(){ }:表示data中的数据已经更新成最新的,但是页面上的数据还是旧的数据,因为此时还没有开始重新渲染DOM节点;
updated(){ }:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了;
销毁期间的生命周期事件
生命周期的最后销毁阶段的钩子函数不是通过手动销毁的,而是通过vue实例自行销毁
beforeDestroy(){ }:实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed(){ }:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
下面是一个案例:
<div id="app">
<p id="p1">{{msg}}</p>
<input type="button" @click='msg+=123' value="点我">
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'面朝大海'
},
methods:{
},
beforeCreate(){
console.log(this.msg);
},
created() {
console.log(this.msg);
},
beforeMount() {
console.log(document.getElementById('p1').innerText);
},
mounted() {
console.log(document.getElementById('p1').innerText);
},
beforeUpdate() {
console.log(document.getElementById('p1').innerText);
},
updated() {
console.log(document.getElementById('p1').innerText);
},
})
</script>
可以看到在通过button按钮改变data中msg数据之前,并不会触发到beforeUpdate和updated事件。
而在改变msg的值后,才触发这两个事件