当前位置：首页 > article >正文

Vue.js 新的生命周期钩子：`onMounted`, `onUpdated` 等

article 2025/2/2 18:07:16

Vue.js 新的生命周期钩子：`onMounted`, `onUpdated` 等

今天我们来聊聊 Vue 3 中的生命周期钩子，特别是 onMounted、onUpdated 等。如果你对如何在 Vue 3 的组合式 API（Composition API）中使用这些钩子感到困惑，那么这篇文章将为你解答。

什么是生命周期钩子？

生命周期钩子是 Vue 在组件生命周期的特定阶段自动调用的函数。它们允许开发者在组件的创建、挂载、更新和销毁等阶段执行特定的操作。

Vue 3 中的生命周期钩子

在 Vue 3 中，随着组合式 API 的引入，生命周期钩子的使用方式也有所变化。以下是常用的生命周期钩子及其对应的调用时机：

onBeforeMount：在组件挂载到 DOM 之前调用。
onMounted：在组件挂载到 DOM 之后调用。
onBeforeUpdate：在组件更新之前调用。
onUpdated：在组件更新之后调用。
onBeforeUnmount：在组件卸载之前调用。
onUnmounted：在组件卸载之后调用。

如何在组合式 API 中使用生命周期钩子？

在组合式 API 中，这些钩子函数需要在 setup() 函数中同步调用。让我们通过一个示例来了解如何使用这些钩子。

示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

const message = ref('Hello, Vue!');

const updateMessage = () => {
  message.value = 'Hello, World!';
};

onBeforeMount(() => {
  console.log('组件即将挂载');
});

onMounted(() => {
  console.log('组件已挂载');
});

onBeforeUpdate(() => {
  console.log('组件即将更新');
});

onUpdated(() => {
  console.log('组件已更新');
});

onBeforeUnmount(() => {
  console.log('组件即将卸载');
});

onUnmounted(() => {
  console.log('组件已卸载');
});
</script>

在这个示例中，我们定义了一个简单的组件，并在 setup() 函数中使用了多个生命周期钩子来监听组件的不同生命周期阶段。每个钩子都会在相应的阶段打印一条消息到控制台。

注意事项