背景
vue生命周期表示组件从创建到销毁的过程。会运行的一些生命周期钩子，学习它有助于我们对 vue 实例的渲染过程进行理解，并借助钩子执行逻辑。
生命周期图解析
渲染器遇到组件
setup (组合式API)
例如 onMounted 对应 mounted ，都是在组件完成初始渲染并创建 DOM 节点后运行代码。
setup 阶段调用的组合式生命周期钩子，都会用回调函数的形式注册在当前的组件实例上。故应当时同步调用，否则不生效。
组合式API中的生命周期钩子，执行逻辑优先于选项式中
beforeCreate
在组件实例初始化完成之后立即调用。 beforeCreate
created
在组件实例处理完所有与状态相关的选项后调用。 created
是否存在预编译的模版
判断是否有 'template' 选项
beforeMount
在组件被挂载之前调用
初始化渲染 创建和插入DOM节点
mounted
在组件被挂载之后调用
beforeUpdate
在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用
重新渲染并打补丁
虚拟 DOM 重新渲染和更新
updated
在组件因为一个响应式状态变更而更新其 DOM 树之后调用
这边的 beforeUpdate 和 updated 都需要在响应式状态变化导致需要更新DOM树之后才会触发，如果不需要更新DOM树则不触发。
beforeUnmount
在一个组件实例被卸载之前调用。在这个阶段，实例仍然是完整的
unmounted
在一个组件实例被卸载之后调用。
调用钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载
特殊的生命周期钩子
上述提及的八个生命周期是常用的，还有五个比较少使用的
# 被 keep-alive 缓存的组件激活时调用，在 mounted 之后调用
activated
# 被 keep-alive 缓存的组件停用时调用，在 beforeUnmount 和 unmounted 之间
deactivated
# 当捕获一个来自子孙组件的错误时被调用
errorCaptured
# 跟踪虚拟 DOM 重新渲染时调用
renderTracked
# 当虚拟 DOM 重新渲染被触发时调用
renderTriggered
父子组件的 beforeCreate created beforeMounte mounted 执行顺序
我们都知道组件内是 create 然后再 mount，那么如果父子组件的这两个生命周期钩子执行顺序可能没有关注到。下面是执行顺序，最好可以手动敲一遍加深印象
- 父 beforeCreate
- 父 created
- 父 beforeMount
- 子 beforeCreate
- 子 created
- 子 beforeMount
- 子 mounted
- 父 mounted
还有一些其他情况，规律是从父到子，逐级递归，从上到下。不做详细解释，不妨实践一下
- 兄弟组件
- 父子孙组件
- 同时存在父子孙和兄弟组件
- keep-alive存在的情况增加了 activated 和 deactivated 两个钩子
父子组件的 update unmount
页面跳转 A => B
- A beforeUnmount
- B setup
- B beforeCreate
- B created
- B beforeMount
- A unmounted
- B mounted
这里可以发现页面跳转要等到 B 页面 beforeMount 之后才会对 A 页面进行 mounted
keep-alive下的 activated & deactivated
切换组件使用的是 v-if，效果和 :is 一致。如果用 v-show 的结果又会如何呢
两个被切换的组件一个是 keep-alive包裹的，一个没有。那如果两个都被 keep-alive 包裹的情况又会如何呢
1. 页面中第一次加载包裹keep-alive的组件 card3
可以看到 card3 的 activated 执行的时机在 card3 mounted 和 keep-alive mounted 之间
2. 页面中切换组件 card3 成组件 card4(第一次加载)
这里值得注意的是 card3 的 deactivated 执行的时机，没有 keep-alive 的情况是 unmounted
3. 页面中切换 card4 到 card3(两个页面都加载过)
card3 activated 介于 card4 beforeUnmounted 和 card4 unmounted 之间
4. 页面中切换 card3 到 card4(两个页面都加载过)
这一步和二个操作结果一致
总结
-
vue 生命周期可以说是贯彻整个 vue 的方方面面，不妨可以将其作为 vue 知识架构梳理各个知识点
-
动手实践可以更好的加深理解
-
对于生命周期的学习不仅仅关注于钩子的特性，也需要多每个阶段所进行的工作进行学习
思考问题
-
表述一遍生命周期的概念，有哪些生命周期勾子函数。
-
父子组件的 beforeCreate created beforeMount mounted 这四个钩子执行顺序是如何的？在上面的基础上如果子组件还有子组件呢
-
页面进行跳转对应的生命周期钩子如何执行？页面关闭的情况呢
-
生命周期中什么情况需要用到 $nextTick
-
activated & deactivated 执行的时机
