一、什么是生命周期?
Vue 实例从创建到销毁的过程,就是生命周期。
二、生命周期钩子
1、创建期间的生命周期函数:
- beforeCreate:实例刚在内存中被创建出来,此时还没初始化好 data 和 methods 属性
- created:实例已在内存中创建,此时 data 和 methods 已经创建完成,还没开始编译模板
- beforeMount:此时已经完成了模板的编译,但还没挂载到页面中
- mounted:此时已将编译好的模板挂载到页面指定的容器中显示
2、运行期间的生命周期函数:
- beforeUpdate:状态更新之前执行此函数,此时 data 中的状态值是最新的,但界面上显示的数据还是旧的,因为还没开始重新渲染 DOM 节点
- updated:实例更新完之后调用此函数,此时 data 中的状态值和界面上显示的数据都已经完成了更新,界面已被重新渲染好
3、销毁期间的生命周期函数:
- beforeDestroy:实例销毁之前调用,这里实例仍然完全可用
- destroyed:Vue 实例销毁后调用,调用后 Vue 实例指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁
三、生命周期图示
四、代码示例
new Vue({ data: { message: 0 }, template: '<div>{{ message }}</div>', beforeCreate() { console.log(this.$el, 'beforeCreate'); }, created() { console.log(this.$el, 'created'); }, beforeMount() { console.log(this.$el, 'beforeMount'); }, mounted() { console.log(this.$el, 'mounted'); }, beforeUpdate() { console.log(this.$el, 'beforeUpdate'); }, updated() { console.log(this.$el, 'updated'); }, activated() { console.log(this.$el, 'activated'); }, deactivated() { console.log(this.$el, 'deactivated'); }, beforeDestroy() { console.log(this.$el, 'beforeDestroy'); }, destroyed() { console.log(this.$el, 'destroyed'); }, errorCaptured() { console.log(this.$el, 'errorCaptured'); } }); // 输出结果
这里,beforeCreate() 和 created() 两个生命周期方法依次被执行,而其它生命周期方法没被触发执行。
如果加上 el 属性
new Vue({ el: '#app', // 设置 el 属性 // ... });
或调用 vm.$mount() 方法
var app = new Vue({ // ... }); app.$mount('#root'); // 调用 Vue 实例的 $mount() 方法
则输出结果为:
可以看到 beforeCreate()、created()、beforeMount() 和 mounted() 四个生命周期方法依次被执行。
因此,在 new 一个 Vue 实例时,如果没设置 el 属性或调用 Vue 实例的 $mount() 方法,其实只会执行 beforeCreate() 和 created() 方法,原因在于生命周期中的 mounted() 方法把 Vue 实例中的 template 属性里的 html 挂载到 el 属性对应的 dom 节点上,如果没有定义 el 属性或没调用 Vue 实例的 $mount() 方法,就无法执行挂载的动作,因为不知要挂载到哪去