小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
摘要
Vue 实例在被创建时都要经过一系列的初始化过程，在这个过程中会运行一些生命周期钩子的函数，我们可以在这些钩子函数里添加自己的代码。
vue 生命周期方法
| 方法名 | 说明 |
|---|---|
| beforeCreate | 组件实例初始化后，组件的属性生效之前（data、methods、computed、watch都不能被访问） |
| created | 组件实例完全创建后调用，data observer、属性和方法的运算、watch/event事件回调都已完成，真是 dom 还没有生成，没有 $el ，可通过 vm.$nextTick 与 dom 交互 |
| beforeMount | 在实例挂载前被调用；相关的 render 函数首次被调用 |
| mounted | 在实例挂载完成后被调用，真实 dom 挂载完成，可以访问到 dom 节点 |
| beforeUpdate | 数据更新前被调用，发生在虚拟 dom 重新渲染或打补丁之前 |
| updated | 数据更新完成后被调用，dom 已完成更新；避免在此阶段更改数据，可能会导致无线循环的更新 |
| beforeDestory | 实例销毁前被调用，在此阶段可以进行收尾工作，如清除定时器、解绑自定义事件等 |
| destoryed | 实例销毁后被调用 |
| activated | keep-alive 专属，组件被激活时调用 |
| deactivated | keep-alive 专属，组件被销毁时调用 |
new Vue({
created: function () {
}
})
vue2 生命周期 VS vue3 生命周期
vue3 中使用了 组合式API
所有生命周期钩子都写在 setup() 函数中，因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显示地定义他们，就是说这两个选项式API用 setup 函数替代了。
| vue2 方法名 | vue3 方法名 |
|---|---|
| beforeCreate | 不需要 |
| created | 不需要 |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestory | onBeforeUnmount |
| destoryed | onUnmounted |
| activated | onActivated |
| deactivated | onDeactivated |
生命周期钩子函数执行顺序
-
加载渲染过程
父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted -
子组件更新过程
父 beforeUpdate->子 beforeUpdate->子 updated->父 updated-> `` -
父组件更新过程
父 beforeUpdate->父 updated -
销毁过程
父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed
