vue3的生命周期

Vue 3 的生命周期与 Vue 2 类似，但在 Composition API 中提供了新的方式来使用生命周期钩子。以下是 Vue 3 的生命周期钩子及其用法：

1. Options API (选项式API)中的生命周期钩子

Vue 3 保留了 Vue 2 的大部分生命周期钩子，但有两个钩子被重命名：

• beforeDestroy → beforeUnmount

• destroyed → unmounted

以下是 Vue 3 中 Options API 的生命周期钩子：

创建阶段（Initialization）

• beforeCreate:

  • 在实例初始化之后，数据观测（data observation）和事件/侦听器配置之前被调用。

• created:

  • 在实例创建完成后被调用。

  • 此时，data、methods、computed 等已经初始化，但 DOM 还未生成。

挂载阶段（Mounting）

• beforeMount:

  • 在挂载开始之前被调用，此时模板已经编译完成，但尚未将 DOM 渲染到页面。

• mounted:

  • 在实例挂载到 DOM 后被调用。

  • 此时，DOM 已经渲染完成，可以访问 DOM 元素。

更新阶段（Updating）

• beforeUpdate:

  • 在数据更新导致 DOM 重新渲染之前被调用。

  • 此时，数据已经更新，但 DOM 还未重新渲染。

• updated:

  • 在数据更新导致 DOM 重新渲染之后被调用。

  • 此时，DOM 已经更新完成。

销毁阶段（Destruction）

• beforeUnmount:

  • 在实例卸载之前被调用。

  • 此时，实例仍然完全可用，可以执行一些清理操作（如清除定时器、取消事件监听等）。

• unmounted:

  • 在实例卸载之后被调用。

  • 此时，实例的所有指令和事件监听器已被移除，子实例也被卸载。

激活阶段（Keep-Alive 相关）

• activated:

  • 当被 <keep-alive> 缓存的组件激活时调用。

• deactivated:

  • 当被 <keep-alive> 缓存的组件停用时调用。

2. Composition API (组合式API)中的生命周期钩子

在 Composition API 中，生命周期钩子通过 onX 函数的形式使用。这些函数需要在 setup() 函数中调用。

创建阶段

• onBeforeMount 对应  beforeMount。

import { onBeforeMount } from "vue";

setup() {
  onBeforeMount(() => {
    console.log("onBeforeMount: 模板编译完成，DOM 未渲染");
  });
}

•  onMounted 对应  mounted

import { onMounted } from "vue";

setup() {
  onMounted(() => {
    console.log("onMounted: 实例已挂载到 DOM，可以访问 DOM 元素");
  });
}

更新阶段

• onBeforeUpdate 对应  beforeUpdate

import { onBeforeUpdate } from "vue";

setup() {
  onBeforeUpdate(() => {
    console.log("onBeforeUpdate: 数据已更新，DOM 未重新渲染");
  });
}

• onUpdated 对应  updated

import { onUpdated } from "vue";

setup() {
  onUpdated(() => {
    console.log("onUpdated: 数据已更新，DOM 已重新渲染");
  });
}

销毁阶段

• onBeforeUnmount 对应  beforeUnmount

import { onBeforeUnmount } from "vue";

setup() {
  onBeforeUnmount(() => {
    console.log("onBeforeUnmount: 实例即将卸载，仍可访问数据和方法");
  });
}

• onUnmounted 对应  unmounted

import { onUnmounted } from "vue";

setup() {
  onUnmounted(() => {
    console.log("onUnmounted: 实例已卸载");
  });
}

激活阶段

• onActivated 对应  activated

import { onActivated } from "vue";

setup() {
  onActivated(() => {
    console.log("onActivated: 组件被激活");
  });
}

• onDeactivated 对应  deactivated

import { onDeactivated } from "vue";

setup() {
  onDeactivated(() => {
    console.log("onDeactivated: 组件被停用");
  });
}

3. 生命周期流程图

Vue 3 的生命周期流程与 Vue 2 类似，以下是简化流程图：

1. 创建阶段:

   • beforeCreate → created

2. 挂载阶段:

   • beforeMount → mounted

3. 更新阶段:

   • beforeUpdate → updated

4. 销毁阶段:

   • beforeUnmount → unmounted

5. 激活阶段（仅适用于 <keep-alive> 缓存的组件）:

   • activated → deactivated

4. Options API 与 Composition API 对比

总结

Vue 3 的生命周期钩子与 Vue 2 类似，但在 Composition API 中提供了更灵活的方式来使用这些钩子。无论是 Options API 还是 Composition API，理解生命周期的调用时机和用途，都能帮助你更好地控制组件的行为和优化性能。