前言
我们都知道，一个 Vue 组件从创建到销毁的过程中所经历的各个阶段。这些阶段包括组件的创建、挂载、更新和销毁等，因此 Vue 专门打造了一系列的钩子函数来描述它们，允许我们在这些关键时刻执行自定义的逻辑。下面本人来为大家讲解一下各种生命周期钩子函数的用法及原理。
为什么要有生命周期钩子函数
首先还是我们的为什么环节，那么我们为什么要来使用生命周期钩子函数呢？我们在日常项目开发中，通常需要在页面刷新、组件创建或者DOM挂载渲染时进行一些操作，而这就需要使用到我们的生命周期钩子函数了。总的来说，通过生命周期钩子，我们可以在组件的不同阶段进行初始化、数据更新、资源回收等操作，从而实现更精确地控制组件的行为和交互。生命周期钩子还可以用于执行异步操作、订阅事件、处理副作用等任务，使得我们的组件更加灵活和强大。
那么生命周期钩子函数有哪些呢？
在官方文档中有着如下常用的生命周期钩子函数，它们也可以分为四个阶段来描述：
- 创建阶段：beforeCreate，created
- 挂载阶段：beforeMount，mounted
- 更新阶段：beforeUpdate，updated
- 销毁阶段：beforeDestroy，destroyed
下面本人将按照各个阶段来为大家讲解一下每个钩子函数
创建阶段
beforeCreate
- 作用： 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在这个阶段，实例的数据和方法尚未初始化，因此不能访问到 data 和 methods 中的数据和方法。
- 用法： 通常在这个钩子函数中进行一些全局的初始化操作，例如设置全局变量、初始化事件总线、设置响应式数据等。
created
- 作用： 在实例创建完成后被立即调用。在这个阶段，实例已经完成了数据观测 (data observer) 和 event/watcher 事件配置，但尚未挂载到 DOM 上。
- 用法： 通常在这个钩子函数中进行实例的初始化操作，例如请求数据、处理数据、订阅事件等。
挂载阶段
beforeMount
- 作用： 在挂载开始之前被调用，在这个阶段，相关的 render 函数首次被调用。
- 用法： 通常在这个钩子函数中进行一些准备工作，例如修改数据、计算属性、监听事件等。
mounted
- 作用： 实例已经挂载到 DOM 上后调用，这时候 DOM 元素可见。
- 用法： 通常在这个钩子函数中进行 DOM 操作和异步请求，例如获取 DOM 元素、设置定时器、发起网络请求等。
更新阶段
beforeUpdate
- 作用： 在数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。在这个阶段，DOM 尚未被更新。
- 用法： 通常在这个钩子函数中进行一些准备工作，例如保存修改前的状态、取消事件监听等。
updated
- 作用： 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。在这个阶段，DOM 已经被更新。
- 用法： 通常在这个钩子函数中进行一些操作，例如获取更新后的 DOM 元素、执行动画效果等。
销毁阶段
beforeDestroy
- 作用： 实例销毁之前调用。在这一步，实例仍然完全可用。
- 用法： 通常在这个钩子函数中进行一些清理工作，例如取消事件监听、清除定时器、释放资源等。
destroyed
- 作用： 实例销毁之后调用。在这时候，所有的事件监听器和所有的子实例都已被移除。
- 用法： 通常在这个钩子函数中进行一些收尾工作，例如清理全局变量、释放资源等。
Vue3中的生命周期钩子函数
与Vue2中的生命周期钩子函数不同的是，在Vue3中我们可以使用 setup 语法糖来取代 beforeCreate 和 created 处于创建阶段的钩子函数。并且在Vue3中，处于挂载阶段的beforeMount 和 mounted 钩子函数是被onBeforeMount 和 onMounted 函数所替代的。同样的处于更新阶段和销毁阶段的钩子函数也被如下函数所取代了：onBeforeUpdate 和 onUpdated、onBeforeUnmount 和 onUnmounted。
两个特殊的钩子函数
在vue中有着两个特殊的钩子函数，activated 和 deactivated ，activated 和 deactivated 钩子函数是用于处理 keep-alive 组件的生命周期的。当一个 keep-alive 组件在切换时，如果被激活或者停用，就会分别触发 activated 和 deactivated 钩子函数。这两个钩子函数主要用于在组件被激活或者停用时执行一些逻辑。
activated
activated 钩子函数会在 keep-alive 组件被激活时调用，也就是在组件从缓存中渲染时调用。这意味着组件从隐藏状态切换到显示状态时，activated 钩子函数会被触发。一般来说，activated 钩子函数适合用于执行一些需要在组件显示时才进行的操作，比如数据请求、动画效果的开启等。
deactivated
deactivated 钩子函数会在 keep-alive 组件被停用时调用，也就是在组件被缓存时调用。这意味着组件从显示状态切换到隐藏状态时，deactivated 钩子函数会被触发。一般来说，deactivated 钩子函数适合用于执行一些需要在组件隐藏时才进行的操作，比如清除定时器、关闭动画效果等。
这两个钩子函数在Vue3中也有着改变，它们改为了 onActivated 和 onDeactivated，不过，为了保持向后兼容性，Vue3 仍然支持使用 activated 和 deactivated 这两个名称来声明这两个钩子函数。因此，如果在 Vue3 项目中使用 activated 和 deactivated 这两个钩子函数，是完全可以的，不会出现问题。
总结
综上所述，在 Vue2 中，常用的生命周期钩子函数包括：
- 创建阶段：
beforeCreate和created - 挂载阶段：
beforeMount和mounted - 更新阶段：
beforeUpdate和updated - 销毁阶段：
beforeDestroy和destroyed
这些钩子函数分别在组件的创建、挂载、更新和销毁等不同阶段被调用，允许我们在这些关键时刻执行自定义的逻辑。
而在 Vue3 中，对于生命周期钩子函数的命名方式发生了一些改变，主要是为了与新的 Composition API 保持一致。具体改变如下：
- 创建阶段：可以使用
setup语法糖代替。 - 挂载阶段：
beforeMount和mounted被分别替换为onBeforeMount和onMounted。 - 更新阶段：
beforeUpdate和updated被分别替换为onBeforeUpdate和onUpdated。 - 销毁阶段：
beforeDestroy和destroyed被分别替换为onBeforeUnmount和onUnmounted。
除此之外，activated 和 deactivated 这两个钩子函数在 Vue 3 中仍然存在，并且保留了名称不变。它们分别用于处理 keep-alive 组件的生命周期，在组件被激活或停用时触发。在 Vue 3 中，它们的命名方式并未发生改变，仍然分别为 activated 和 deactivated。
以上就是本人对于vue中生命周期钩子函数的理解，如有不足之处，欢迎加以补充。