【vue回顾系列】25-一图看懂生命周期，并教你怎么口述出来

一图总结

这张图是我在官网图的基础上修改的，珍藏了一年多，可以放出来了。

---

怎么口述

可能会有小伙伴觉得看图不太好闭卷口述出来，这里我就按照自己的理解打个样出来（这里不需要详细描述vdom的更新原理）。

vue的生命周期分为四个大的阶段，分别是组件初始化阶段，模板编译阶段，组件更新阶段和组件销毁阶段。

初始化阶段

首先将vue实例化，data、methods等尚未初始化，此时提供了beforeCreate这个钩子函数供使用。

接着vue初始化完成，data、methods等可以使用了，此时提供了created这个钩子函数供使用。

beforeCreate() {
	// 这个钩子中的使用目前我还不知道能举什么例子
},
created() {
	// 这里因为data、methods等可以使用了，所以可以用来提前处理一些变量，调用一些函数
}

模板编译阶段

接着进入模板编译阶段，将模板的字符串进行编译，生成vdom放入内存中，此时提供了beforeMount这个钩子函数供使用。

紧接着把内存中的vdom渲染成真实的dom，挂载到真实的页面上，组件创建完成。此时提供了mounted这个钩子函数供使用。

beforeMount() {
	// 这个钩子中的使用目前我还不知道能举什么例子
},
mounted() {
	// 这里组件已经实例化完成，可以做很多事情了
	this.$refs['子组件'].getData() // 获取组件实例
	this.$nextTick(()=>{
		this.$refs['子组件'].getData() // 如果获取不到子组件就用nextTick
	})
	this.getData() // 发送异步请求
	this.$on('fn', this.fn) // 订阅事件总线
	window.addEventListener('resize', this.fn) // 监听方法
	let timer = setInterval(()=>{}, 1000) // 开启定时器
	// ...等等
}

更新阶段

在组件运行中，data发生改变，视图未更新前提供了beforeUpdate这个钩子函数供使用。

data改变后，重新进行对应的模板编译，把新的vdom渲染更新到真实的dom上，挂载后提供了updateed这个钩子函数供使用。

组件销毁

组件即将进入销毁的时候，此时提供了beforeDestroy这个钩子函数供使用。

组件完全销毁后，此时提供了destroyed这个钩子函数供使用。

beforeDestroy() {
	// 进行一些注销操作
	this.$off('fn', this.fn) // 取消事件总线
	this.timer = null // 定时器销毁
	window.a = null // 全局变量销毁
	window.addEventListener('resize', null) // 监听事件销毁
},
destroyed() {
	// 这个钩子中的使用目前我还不知道能举什么例子
}

---

子父组件生命周期顺序

在组件挂载阶段：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

注意了，理论上说是，父组件保证子组件挂载完毕后，才能触发mounted，但是实际上还是不能保证的，用vue提供的nextTick可解决这个问题。

在组件更新阶段：父beforeUpdate->子beforeUpdate->子updated->父updated

在组件销毁阶段：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

---

注意内存泄漏

在生命周期中，我们要考虑内存泄漏的问题，例如在mounted中，添加了全局变量、事件监听，定时器，事件总线等，都需要在beforeDestroy中进行消除。

---

异步请求放在created还是mounted中

详细看我这篇【vue其他相关】欢迎讨论！异步请求放在生命周期中的created还是mounted，已填坑