生命周期作用
生命周期函数是Vue实例从创建到销毁的整个生存期间经历的一系列钩子函数，开发者可以利用钩子钩子函数进行以下操作：
- 初始化数据，配置：在组件被创建的时候可以初始化所需数据和默认配置
- 与DOM进行交互：在DOM挂载之后，可对其进行操作，添加事件监听
- 数据响应式更新：在组件进行更新变化的时候，能够触发设定的事件，如数据更新
- 资源释放：在组件什么周期结束的时候，可在销毁钩子函数中清理，释放资源，如定时器，解绑事件监听等
vue2与vue3的生命周期在大体上一致，只有几个地方发生了变化：
| Vue 2 生命周期钩子 | Vue 3 setup 生命周期函数 |
|---|---|
beforeCreate | 不再需要（setup() 就相当于 beforeCreate 和 created） |
created | 不再需要（放在 setup() 中） |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onupdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
生命周期详解
生命周期大致可分为四个阶段，主要是创建（实例化），挂载，更新，销毁。
考虑到Vue2与Vue3的生命周期函数除了在创建阶段，Vue3中使用了setup函数之外，没有太大区别，所以下文使用Vue2中的函数名称进行介绍：
- 创建（实例化）：开始创建Vue实例
beforeCreate：此时是Vue生命周期的最开始阶段，Vue实例尚未创建完成，所以无法访问Vue2中data中的数据Created：Vue实例已完成数据观测，属性和方法的运算，以及watch/event事件回调的配置。这个阶段是进行数据请求、数据初始化的理想时机。在这个钩子函数执行时，可以访问到响应式数据，也可以使用方法、计算属性等。不过此时还未挂载DOM，因此不应该执行任何DOM操作。
- 挂载：Vue实例已经创建，将会在这个阶段挂载到真实DOM上
beforeMount：这个阶段处于需要挂载开始之前，可用于处理最后需要的数据和需要的渲染处理mounted：这个阶段已经挂载完毕，可以执行与DOM相关的操作，
- 更新：数据发生变化，触发更新
beforeUpdate：在响应式数据发生变化，虚拟DOM需要重新渲染之前调用。因此这个阶段适合处理大量的数据更新，和DOM操作updated：此时已经完成响应式数据变化导致的虚拟DOM渲染，因此可以执行最新的DOM操作，需要注意是的是，需要避免在这个时候做更新状态，否则会触发循环渲染的现象
- 销毁：生命周期结束
beforeDestroy：Vue实例即将开始销毁，但是实例完全可用，在此时适合去处理定时器，解绑事件等destroyed：Vue实例的所有指令都已解绑，所有的事件监听器已被移除，所有的子实例也都被销毁
父子组件的生命周期
如果存在父子组件的关系，那么其生命周期也会有相关的变化。
其执行顺序如下：
- 父组件 -
beforeCreate: 创建父组件实例。 - 父组件 -
created: 完成父组件的数据初始化。 - 子组件 -
beforeCreate: 创建子组件实例，此时父组件尚未挂载。 - 子组件 -
created: 完成子组件的数据初始化。 - 父组件 -
beforeMount: 准备将父组件挂载到 DOM。 - 子组件 -
beforeMount: 准备将子组件挂载到 DOM。 - 子组件-
mounted: 子组件已挂载到 DOM，可以进行 DOM 操作。 - 父组件 -
mounted: 父组件已挂载到 DOM，可以进行 DOM 操作。
有Keep-Alive生命周期
当组件中使用了<keep-alive></keep-alive>，会增加额外的两个生命周期activated 和 deactivated 钩子
作用：
activated: 当组件被激活时（从缓存中恢复时）调用。此时组件的状态恢复，可以进行任何需要在重新显示时的操作。deactivated: 当组件被停用（缓存）时调用。此时组件的状态会保留，但可以进行任何需要在隐藏时的操作。
activated会在父子组件最后进行激活，完全生命周期如下：
首次激活：
- 父组件 -
beforeCreate: 创建父组件实例。 - 父组件 -
created: 完成父组件的数据初始化。 - 子组件 -
beforeCreate: 创建子组件实例。 - 子组件 -
created: 完成子组件的数据初始化。 - 父组件 -
beforeMount: 准备将父组件挂载到 DOM。 - 子组件 -
beforeMount: 准备将子组件挂载到 DOM。 - 子组件 -
mounted: 子组件已挂载到 DOM，可以进行 DOM 操作。 - 父组件 -
mounted: 父组件已挂载到 DOM，可以进行 DOM 操作。 - 子组件 -
activated: 这标志着子组件的第一次激活。
切换：
- 父组件 -
beforeCreate: 创建父组件实例。 - 父组件 -
created: 完成父组件的数据初始化。 - 子组件 -
beforeCreate: 创建子组件实例。 - 子组件 -
created: 完成子组件的数据初始化。 - 父组件 -
beforeMount: 准备将父组件挂载到 DOM。 - 子组件 -
beforeMount: 准备将子组件挂载到 DOM。 - 子组件 -
mounted: 子组件已挂载到 DOM，可以进行 DOM 操作。 - 父组件 -
mounted: 父组件已挂载到 DOM，可以进行 DOM 操作。 - 子组件 -
deactivated: 当切换到其他组件时，子组件被停用。 - 子组件 -
activated: 当再次切换回该组件时，子组件被激活。
