首先,我们来明白什么是生命周期。
百度百科上对生命周期的定义是指一个对象的生老病死。那么对于Vue来说,什么又是Vue的生命周期呢?
Vue的生命周期又叫实例的生命周期。Vue创建的实例需要经过创建、运行、销毁过程,这些过程又伴随着许多事件,这些事件的总称我们就可以叫做Vue的生命周期。
下面我附上一位技术讲师的流程图,来详细说明生命周期。
我们先来走一遍这个流程
创建实例
var vm=new Vue({})
这就表示创建了一个Vue实例对象。
接下来我们初始化Vue的实例对象
beforeCreate() {
console.log(this.msg);
this.show()
},
beforeCreate
这是我们遇到的第一个生命周期函数 ,表示实例被完全创建出来,会执行它。
这时候我们会得到如下结果
表明在beforeCreated生命周期执行的时候data和methods中的数据都还没有初始化
created
created是我们遇到的第二个周期函数,这里data和methods都已经被初始化好了。
created() { //这是我们遇到第二个生命周期函数
//在created中 data和 methods 都已经被初始化好了
//如果要调用data中的数据或者methods中的方法,最早,只能在created中操作
console.log(this.msg);
this.show()
}
我们会得到如下结果
所以我们如果要对data中的数据或者methods中的方法进行操作,最早,只能在created中进行。
beforeMount
这是我们遇到第三个生命周期函数,表示模板已经在内存中编辑,但是还没有把模板渲染到页面中去。
beforeMount() { //这是我们遇到的第三个生命周期的函数,表示模板已经在内存中编辑,但是尚未把模板渲染到页面中去
console.log(document.querySelector('h3').innerText)//{{msg}} 表示还没有把模板渲染到页面中去
//在beforeMount 执行的时候,页面中的元素,还没有被真正的替换过来,只是之前写到的一些模板字符串
},
结果如下
我们可以输出下结果看到还并没有把模板渲染到页面中去。在beforeMounted执行的时候,页面中的元素,还没有被真正的替换过来,只是之前写到的一些模板字符串
mounted
这是我们遇到的第四个生命周期函数,表示内存中的模板,已经真正的挂载到了页面中,用户已经可以看到渲染好的页面。
mounted() { //这是我们遇到的第四个生命周期的函数,表示内存 中的模板, 已经真正的挂载到了页面中,用户已经可以看到渲染好的页面
console.log(document.querySelector('h3').innerText)
//注意 :mounted是实例创建 的最后一个生命周期,当执行完methods 就表示实例已经被完全的创建好了,此时,如果没有其他操作的话
//这个实例,就静静的躺在我们的内存汇中,一动不动
},
结果如下
注意 :mounted是实例创建 的最后一个生命周期,当执行完methods 就表示实例已经被完全的创建好了,此时,如果没有其他操作的话,这个实例,就静静的躺在我们的内存汇中,一动不动。
运行
接下来的两个事件是运行中的事件
beforeUpdate
beforeUpdate() {
console.log('页面上的元素是 '+document.querySelector('h3').innerText);//ok
console.log('data中的msg数据是'+this.msg)//no
//结论:当执行beforeUpdated事件的时候,页面中的显示的数据还是旧的,此时data中的数据时最新的,页面上尚未和最新的数据保持同步
},
运行结果如下
结论: 当执行beforeUpdated事件的时候,页面中显示的数据还是旧的,此时data中的数据时最新的,页面上尚未和最先的数据保持同步
updated
updated() { //updated事件执行额时候,页面和data数据已经保持同步了,都是最新的
console.log('页面是的元素是'+document.querySelector('h3').innerText);//no
console.log('data中的msg数据时'+this.msg)//no
},
运行结果
这是运行事件中的最后一个事件,可以看到updated事件执行的时候,页面和data的数据已经保持同步了,都是最新的。
销毁
beforeDestroy
当只想beforeDestory钩子函数时,Vue就已经从运行阶段,进入到了销毁阶段;
当执行beforeDestory的时候,实例身上所有的data和methods,以及过滤器,指令等都出于可用状态,此时还没有真正执行销毁的过程。
destoyed
当执行到destoryed函数的时,组件已经被完全的销毁了,此时组件中所有的数据、方法、指令、过滤器都已经不可用了。
总结
上面就是Vue的生命周期函数,beforeCreate、created、beforeMount、mounted是实例创建阶段、beforeUpdate、updated是运行阶段、beforeDestory、destoryed是销毁阶段。