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 对比

生命周期钩子	Options API	Composition API
创建阶段	beforeCreate	无直接对应
创建阶段	created	无直接对应
挂载阶段	beforeMount	onBeforeMount
挂载阶段	mounted	onMounted
更新阶段	beforeUpdate	onBeforeUpdate
更新阶段	updated	onUpdated
销毁阶段	beforeUnmount	onBeforeUnmount
销毁阶段	unmounted	onUnmounted
激活阶段	activated	onActivated
激活阶段	deactivated	onDeactivated

总结

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