Vue 生命周期钩子与组合式 API：全方位解析

## Vue 生命周期钩子

在 Vue 中，生命周期钩子是组件在不同阶段执行的函数。这些钩子可以用于执行各种任务，例如初始化数据、更新 DOM 或销毁组件。

Vue2 和 Vue3 中的组件生命周期钩子基本相同，但有一些细微的差异。例如，Vue3 中引入了新的钩子 `onActivated` 和 `onDeactivated`，用于在组件被激活和非激活时执行。

### 选项式 API 的生命周期钩子

在选项式 API 中，生命周期钩子是通过在组件选项中定义函数来实现的。例如，`created` 钩子可以这样定义：

```javascript
created() {
  // 组件被创建时执行
}

Vue2 中常用的生命周期钩子包括：

• beforeCreate：在组件实例被创建之前执行。
• created：在组件实例被创建之后执行。
• beforeMount：在组件实例被挂载到 DOM 之前执行。
• mounted：在组件实例被挂载到 DOM 之后执行。
• beforeUpdate：在组件实例更新之前执行。
• updated：在组件实例更新之后执行。
• beforeDestroy：在组件实例被销毁之前执行。
• destroyed：在组件实例被销毁之后执行。

组合式 API 的生命周期钩子

在组合式 API 中，生命周期钩子是通过使用 setup() 函数返回的对象来实现的。例如，created 钩子可以这样定义：

setup() {
  onCreated(() => {
    // 组件被创建时执行
  })
}

Vue3 中常用的生命周期钩子包括：

• onBeforeCreate：在组件实例被创建之前执行。
• onCreated：在组件实例被创建之后执行。
• onBeforeMount：在组件实例被挂载到 DOM 之前执行。
• onMounted：在组件实例被挂载到 DOM 之后执行。
• onBeforeUpdate：在组件实例更新之前执行。
• onUpdated：在组件实例更新之后执行。
• onBeforeUnmount：在组件实例被销毁之前执行。
• onUnmounted：在组件实例被销毁之后执行。

Vue 中的 vnode 生命周期

在 Vue 中，vnode 是虚拟 DOM 的最小单元。vnode 生命周期是指 vnode 从创建到销毁的整个过程。

vnode 生命周期包括以下几个阶段：

• 创建：当组件实例被创建时，vnode 被创建。
• 更新：当组件实例更新时，vnode 被更新。
• 销毁：当组件实例被销毁时，vnode 被销毁。

在 vnode 生命周期中，有几个重要的钩子函数：

• beforeCreate：在 vnode 被创建之前执行。
• created：在 vnode 被创建之后执行。
• beforeMount：在 vnode 被挂载到 DOM 之前执行。
• mounted：在 vnode 被挂载到 DOM 之后执行。
• beforeUpdate：在 vnode 被更新之前执行。
• updated：在 vnode 被更新之后执行。
• beforeUnmount：在 vnode 被销毁之前执行。
• unmounted：在 vnode 被销毁之后执行。

总结

Vue.js 的生命周期钩子是组件在不同阶段执行的函数。这些钩子可以用于执行各种任务，例如初始化数据、更新 DOM 或销毁组件。

Vue2 和 Vue3 中的组件生命周期钩子基本相同，但有一些细微的差异。例如，Vue3 中引入了新的钩子 onActivated 和 onDeactivated，用于在组件被激活和非激活时执行。

在组合式 API 中，生命周期钩子是通过使用 setup() 函数返回的对象来实现的。

Vue 中的 vnode 生命周期是指 vnode 从创建到销毁的整个过程。vnode 生命周期包括创建、更新和销毁三个阶段。

希望这篇文章能帮助你更好地理解 Vue 的生命周期钩子和 vnode 生命周期。