vue3 生命周期钩子

news2024/9/24 17:10:39

在 Vue 3 中，可以在组件不同阶段的生命周期执行特定逻辑。
生命周期整体分为四个阶段：创建、挂载、更新、卸载。

创建阶段

组合式API`setup()`

这是组合式 API 的入口点，在组件实例创建之前被调用。
在此阶段，可以初始化响应式数据、定义方法等。但不能使用 this，因为它不是传统选项式 API 的上下文。
可以通过 import { reactive, ref } from 'vue'; 导入响应式函数来创建响应式数据。

挂载阶段

选项式API`onBeforeMount()`

注册一个钩子，在组件被挂载之前被调用。

作用
- 通常用于在组件挂载之前进行一些初始化操作，这些操作不依赖于 DOM 元素的存在。
- 例如，可以在这个阶段进行数据的预加载、初始化一些变量或者设置一些状态，为组件的挂载做好准备。
执行时机
- 在组件的 setup 函数执行之后，以及组件真正被挂载到 DOM 之前调用。
  当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点，不能访问到 DOM 元素。它即将首次执行 DOM 渲染过程。
注意事项
- 在 onBeforeMount() 阶段，组件尚未被挂载到 DOM，所以无法直接访问 DOM 元素。
这个钩子在服务器端渲染期间不会被调用。

选项式API`onMounted()`

注册一个回调函数，在组件挂载完成后执行。

作用
- 主要用于在组件被渲染并插入到 DOM 后，执行一些需要访问 DOM 元素或进行依赖 DOM 操作的任务。
- 例如，可以在这个阶段初始化第三方库、设置元素的初始状态、添加事件监听器等。
执行时机
- 在组件挂载到 DOM 后调用。意味着在组件及组件的所有子组件都被挂载之后调用。可以确保在 onMounted 中访问子组件的 DOM 元素是安全的。
组件在以下情况下被视为已挂载：
- 其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
- 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
这个钩子在服务器端渲染期间不会被调用。

更新阶段

选项式API`onBeforeUpdate()`

注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

作用
- 可以在这个阶段获取到组件更新前的状态，以便进行一些特定的处理或记录。
- 例如，可以在这个阶段保存一些当前的状态信息，以便在更新后进行比较或恢复。
执行时机
- 当响应式数据发生变化，并且 Vue 检测到需要更新组件时，在实际更新之前调用onBeforeUpdate。
注意事项：
- onBeforeUpdate应该快速执行，避免进行耗时的操作，因为这可能会延迟组件的更新。
- onBeforeUpdate通常与onUpdated一起使用，以便在更新前后进行相应的处理。
这个钩子在服务器端渲染期间不会被调用。

选项式API`onUpdated()`

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
在组件更新完成后执行。

作用
- 主要用于在组件的响应式数据变化导致重新渲染后执行一些操作。
- 可以在这个阶段安全地访问和操作更新后的 DOM 元素。
执行时机
- 在组件的 DOM 更新完成后调用。
- 父组件的更新钩子将在其子组件的更新钩子之后调用。
注意事项：
- 不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！
- 如果需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 。
这个钩子在服务器端渲染期间不会被调用。

卸载阶段

选项式API`onBeforeUnmount()`

注册一个钩子，在组件实例被卸载之前调用。

作用
- 主要用于在组件被销毁之前进行一些清理操作，例如取消订阅事件、清除定时器、移除 DOM 事件监听器等，以避免内存泄漏和不必要的资源占用。
- 可以在这个阶段保存一些组件的状态信息，以便在后续可能的重新创建中恢复。
执行时机
- 在组件即将被卸载，即从 DOM 中移除之前调用。此时组件的 DOM 元素仍然存在，可以被访问到。
注意事项：
- 当这个钩子被调用时，组件实例依然还保有全部的功能。
- 在onBeforeUnmount中进行清理操作时，要确保所有的资源都被正确地释放，以避免内存泄漏和其他潜在的问题。
- 这个钩子函数应该快速执行，避免进行耗时的操作，因为这可能会延迟组件的卸载过程。
这个钩子在服务器端渲染期间不会被调用。

选项式API`onUnmounted()`

注册一个回调函数，在组件实例被卸载之后调用。

作用
- 通常用于进行最后的清理工作，确认所有资源都已被正确释放，并且组件不再占用任何内存或资源。
- 可以在这个阶段进行一些日志记录或其他与组件卸载相关的操作，以帮助调试和了解应用的运行状态。
执行时机
- 在组件的 DOM 元素被完全移除且所有相关的资源都已被清理后调用。
一个组件在以下情况下被视为已卸载：
- 其所有子组件都已经被卸载。
- 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。
注意事项：
- 在onUnmounted中，组件的 DOM 元素已经被移除，无法再访问它们。
- 确保在onUnmounted中进行的清理操作是完整的，避免留下任何潜在的内存泄漏或资源占用问题。
这个钩子在服务器端渲染期间不会被调用。

示例

父组件：

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script setup lang="ts" name="Parent">
import {
  onBeforeMount,
  onMounted,
} from 'vue';
import ChildComponent from './ChildComponent.vue';

console.log('父组件---- setup 在组件实例创建之前被调用')

// 挂载前
onBeforeMount(() => {
  console.log('父组件---- onBeforeMount 在组件被挂载之前被调用');
});

// 挂载完毕
onMounted(() => {
  console.log('父组件---- onMounted 在组件挂载完成后执行');
});

</script>

子组件：

<template>
  <div ref="divRef">{{ data }}</div>
  <button @click="changeData">修改数据</button>
</template>
<script setup lang="ts" name="ChildComponent">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref
} from 'vue';

let divRef = ref()
let data = ref('hello Vue3 生命周期')

const changeData = () => {
  data.value = data.value + '！'
}

console.log('子组件---- setup 在组件实例创建之前被调用')

// 挂载前
onBeforeMount(() => {
  console.log('子组件---- onBeforeMount 在组件被挂载之前被调用');
  // 组件还未挂载,不能访问DOM
  console.log('子组件---- divRef.value:', divRef.value); // undefined
});

// 挂载完毕
onMounted(() => {
  console.log('子组件---- onMounted 在组件挂载完成后执行');
  // 组件已经挂载完毕
  console.log('子组件---- divRef.value:', divRef.value); // ref为divRef的DOM节点
});

// 更新前
onBeforeUpdate(() => {
  console.log('onBeforeUpdate 在 Vue 更新 DOM 之前访问 DOM 状态');
});

// 更新后
onUpdated(() => {
  console.log('onUpdated 在组件更新完成后执行');
});

// 卸载前
onBeforeUnmount(() => {
  console.log('onBeforeUnmount 在组件实例被卸载之前调用');
  // DOM 元素仍然存在，可以被访问到
  console.log('divRef.value:', divRef.value); // ref为divRef的DOM节点
});

// 卸载后
onUnmounted(() => {
  console.log('onUnmounted 在组件实例被卸载之后调用');
  // DOM 元素已经被移除，无法再访问
  console.log('divRef.value:', divRef.value); // undefined
});
</script>