对Vue的生命周期的理解

因为是第一天学习vue，可能有理解不全面或者错误的地方，如果有误导，非常抱歉。

---

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");
},

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

---

7.beforeDestroy：
当前组件即将被销毁
当我们不需要vue操纵DOM时，就需要销毁Vue，清除vue实例和DOM的关联
beforeDestroy函数是我们最后能够访问到组件数据和方法的函数

---

8.destroyed：
当前组件已经被销毁
在销毁后，会触发 destroyed钩子函数

---

部分参考：vuejs官网
https://cn.vuejs.org.