四、Vue生命周期
一、生命周期图解
Vue生命周期
正如生命有者生老病死一样，程序一样有和生命类似的周期，Vue为开发者定义了11个生命周期钩子，便于开发者在Vue处于不同状态时调用，他们分别是：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- errorCaptured (Vue 2.5 版本新增)
beforeCreate
在Vue实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，dom渲染、挂载阶段还没开始，$el 属性目前不可见
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用
mount
dom渲染、挂载完成之后调用该钩子。
注意这里dom挂载完成不包括子组件
beforeUpdate
数据更新时调用，发生在 DOM 重新渲染、打补丁之前
这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
activated
keep-alive 组件激活时调用
deactivated
keep-alive 组件停用时调用
keep-alive 具体参见Vue内置组件keep-alive
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例都会被销毁
errorCaptured
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播
我们可以用如下代码来测试Vue基本的生命周期执行顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期学习</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
this.message = 'mounted'
setTimeout(function () {
vm.$destroy()
}, 200)
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</html>
在浏览器中打开控制台，就可以看到Vue整个生命周期执行顺序
可以看到在beforeCreate - created 后 $data 被挂载
生命周期
beforeMount - mounted 后 $el被挂载并更新
生命周期
在mounted 改变data中的message后 beforeUpdate - updated 被调用
生命周期
最后在mounted 200 毫秒后 手动调用 vm.$destroy(), 销毁Vue对象,beforeDestroy - destroyed 被调用
生命周期
Vue代码中使用的mounted函数为Vue独有的生命周期方法，要了解生命周期请参考
Vue生命周期文档
生命周期图解
生命周期测试代码
