详解 Vue 八大生命周期钩子函数
摘要：Vue 为生命周期中的每个状态都设置了钩子函数(监听函数) 。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。
本文分享自华为云社区《一文带你弄懂Vue八大生命周期钩子函数》，原文作者：北极光之夜。
一.速识概念：
我们把一个对象从生成（new）到被销毁（destory）的过程，称为生命周期。而生命周期函数，就是在某个时刻会自动执行的函数。
按照官方的原话，就是每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
简单来说就是每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等。Vue 为生命周期中的每个状态都设置了钩子函数(监听函数) 。每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。
二.八大生命周期钩子函数：
下面是官方文档里的生命周期图，英语好的同学可以看看：
三.结合代码了解：
先看案例基本代码如下，后面通过如下代码步骤演示一个对象从生成到被销毁的过程各阶段执行的生命周期函数。注意 show 函数的作用。
1. beforeCreate：
这个阶段 vue 实例刚刚在内存中创建，此时 data 和 methods 这些都没初始化好。
在案例中添加 beforeCreate 钩子函数：
看运行结果：
可以看到，此时 vue 实例刚刚在内存中创建，其它什么都 undefined。
2.created：
这个阶段 vue 实例在内存中已经创建好了，data 和 methods 也能够获取到了，但是模板还没编译。
在案例中添加 created 钩子函数：
看结果：
看到没，已经知道 data 里的数据了。其它的话都没。
3.beforeMount：
这个阶段完成了模板的编译，但是还没挂载到页面上。
在案例中添加钩子函数：
看结果：
看到没，要挂载的对象都编译好了，但是页面的 DOM 树还没挂上去，这个阶段页面还没能显示出来。
4.mounted：
这个阶段，模板编译好了，也挂载到页面中了，页面也可以显示了。
在案例中添加钩子函数：
看结果：
5.beforeUpdate:
转态更新之前执行此函数，此时 data 中数据的状态值已经更新为最新的，但是页面上显示的数据还是最原始的，还没有重新开始渲染 DOM 树。
先改变 data 里数据：
在案例中添加钩子函数：
看结果：
看到没，vue 实例里的数据已经变成了南极光之夜。但是此阶段页面 DOM 节点上显示的还是初始的数据北极光之夜。
6.updated：
这个阶段是转态更新完成后执行此函数，此时 data 中数据的状态值是最新的，而且页面上显示的数据也是最新的，DOM 节点已经被重新渲染了。
在案例中添加钩子函数：
看运行结果：
更新了，全都更新了~
7.beforeDestroy：
beforeDestroy 阶段处于 vue 实例被销毁之前，当然，这个阶段 vue 实例还能用。
销毁 Vue 实例：
在案例中添加钩子函数：
看效果：
8.destroyed：
这个阶段在 vue 实例销毁后调用，此时所有实例指示的所有东西都会解除绑定，事件监听器也都移除，子实例也被销毁。
在案例中添加钩子函数：
看结果：
版权声明: 本文为 InfoQ 作者【华为云开发者社区】的原创文章。
原文链接:【http://xie.infoq.cn/article/077bb86e6c1598081b4135f11】。文章转载请联系作者。
提供全面深入的云计算技术干货 2020.07.14 加入
华为云开发者社区，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态，方便开发者快速成长与发展，欢迎提问、互动，多方位了解云计算！ 传送门：https://bbs.huaweicloud.com/
评论