一图总结
这张图是我在官网图的基础上修改的,珍藏了一年多,可以放出来了。
怎么口述
可能会有小伙伴觉得看图不太好闭卷口述出来,这里我就按照自己的理解打个样出来(这里不需要详细描述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中进行消除。