【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中进行消除。