1. 生命周期是什么

Vue的每个组件都是独立的，从一个组件创建、数据初始化、 挂载、 更新、销毁，这就是一个组件的生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模版、将实例挂载到DOM、在数据变化时更新DOM等。在这个过程中会运行一些生命周期钩子函数，使用户可在不同阶段添加自己的代码。
生命周期钩子需要写在new Vue({})时传递的对象内，以属性的方式进行声明
⚠️：不能使用箭头函数来定义一个生命周期钩子

2. 生命周期过程图

在这里插入图片描述

3. Vue的生命周期钩子函数

创建期间的钩子：
- beforeCreate：此时实例刚被创建出来，但还没有初始化好data和methods属性
- created：实例的data和methods属性已经初始化，但此时还没开始编译模版
- beforeMount：此时已经完成了编译好了最终模版，但还没有将模版渲染到页面上
- mounted：此时已经将编译好的模版渲染到页面上
运行期间的钩子
- beforeUpdate：Vue实例中保存数据被修改了，但界面还未更新
- updated：data中保存数据和界面上显示的数据都完成了更新
销毁期间的钩子
- beforeDestroy：当前组件即将被销毁
- destroyed：当前组件已经被销毁

4. 测试钩子函数

// 测试用的数据长下面这样
<div id="app">
	<p>{{message}}</p>
</div>
<script>
	const app = new Vue({
		el: '#app',
        data: {
        	message: 'Hi Vue'
        },
		methods: {
			say: function() {
				console.log('hello vue');
			}
		}
	})

1.beforeCreate：
此时实例刚被创建出来，但还没有初始化好data和methods属性

beforeCreate: function () {
	console.log(this.message); // 测试data属性
	console.log(this.say); // 测试methods属性
	console.log('beforeCreate');
}

控制台输出结果:

在这里插入图片描述

2.created：
实例的data和methods属性已经初始化，但此时还没开始编译模版

// 调用created的时候，是我们能最早访问Vue实例中保存的数据和方法的地方
created: function () {
	console.log(this.message); // 测试data属性
	console.log(this.say); // 测试methods属性
	console.log('created');
},

控制台输出结果:

在这里插入图片描述

3.beforeMount：
此时已经完成了编译好了最终模版，但还没有将模版渲染(挂载)到页面上

beforeMount: function () {
    console.log(document.querySelector("p").innerHTML); // 测试模版是否渲染到页面上
    console.log(document.querySelector("p").innerText); // 测试模版是否渲染到页面上
    console.log("beforeMount");
},

控制台输出结果:

在这里插入图片描述

4.mounted：
此时已经将编译好的模版渲染(挂载)到页面上

mounted: function () {
    console.log(document.querySelector("p").innerHTML); // 测试模版是否渲染到页面上
    console.log(document.querySelector("p").innerText); // 测试模版是否渲染到页面上
    console.log("mounted");
},

控制台输出结果:

在这里插入图片描述

5.beforeUpdate：
Vue实例中保存数据被修改了，但界面还未更新
⚠️：只有保存数据被修改了才会调用beforeUpdate，否则不会调用

beforeUpdate: function () {
    console.log(this.message);  // 验证数据是否变化
    console.log(document.querySelector("p").innerHTML);  // 验证界面是否对应更新
    console.log(document.querySelector("p").innerText); 
    console.log("beforeUpdate");
},

在控制台中修改data中的message：
此时data中的message已改变，但界面中<p>中的内容未变

在这里插入图片描述

6.updated：
data中保存数据和界面上显示的数据都完成了更新

updated: function () {
    console.log(this.message); // 验证数据是否变化
    console.log(document.querySelector("p").innerHTML); // 验证界面是否对应更新
    console.log(document.querySelector("p").innerText);
    console.log("updated");
},