前言

我们都知道，一个 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中生命周期钩子函数的理解，如有不足之处，欢迎加以补充。