【Vue3】 中的 【onMounted】：详解与使用

引言

在 Vue 3 中，

onMounted

是一个生命周期钩子，用于在组件实例被挂载到 DOM 上后执行代码。它是组合式 API 的一部分，使得我们在组件中可以更灵活地管理生命周期。本文将详细介绍

onMounted

的用法、特性以及常见场景。

什么是生命周期钩子？

在 Vue 中，生命周期钩子是组件在其生命周期的不同阶段调用的特殊方法。Vue 3 提供了一组生命周期钩子，帮助我们在组件创建、更新和销毁时执行特定的代码。

onMounted

是其中之一。

onMounted

的基本用法

引入

要使用

onMounted

，需要从

vue

包中导入它：

import { onMounted } from 'vue';

示例

下面是一个简单的示例，展示如何使用

onMounted

：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    onMounted(() => {
      console.log('组件已挂载到 DOM');
      // 可以在这里进行数据获取或其他操作
    });

    return {
      message,
    };
  },
};
</script>

在这个示例中，当组件挂载到 DOM 后，控制台将输出一条消息。

onMounted

的特性

1. 只调用一次：onMounted 只会在组件第一次挂载时调用。如果组件的状态发生变化而未被卸载，它不会再次调用。
2. 异步操作：onMounted 可以用于进行异步操作，例如数据请求。在挂载后执行这些操作，可以确保组件的 DOM 已经准备好。
3. 与其他生命周期钩子结合使用：onMounted 通常与其他生命周期钩子（如 onBeforeMount 和 onUnmounted）一起使用，以实现更复杂的组件逻辑。

常见用法

1. 数据获取

通常在组件挂载后，我们需要获取数据并渲染。可以在

onMounted

中调用 API：

onMounted(async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  // 更新数据状态
});

2. DOM 操作

onMounted

也可以用于直接操作 DOM。例如，初始化图表或使用第三方库：

import { onMounted } from 'vue';

onMounted(() => {
  const chart = new Chart(document.getElementById('myChart'), {
    // chart configuration
  });
});

3. 事件监听

在组件挂载后添加事件监听器，并在卸载时清除它们：

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

注意事项

1. 组件销毁：确保在 onUnmounted 中清理可能导致内存泄漏的操作，例如事件监听器和定时器。
2. 响应式数据：如果在 onMounted 中修改响应式数据，确保使用 Vue 提供的响应式 API（如 ref 和 reactive），以保持数据的响应性。
3. 使用场景：onMounted 不适合用于初始化组件的基本状态（如 props），它更适合执行需要依赖于 DOM 或外部数据的操作。