Vue 3 中的 onMounted介绍

在 Vue 3 中，onMounted 是 Composition API 中的一个生命周期钩子（lifecycle hook），用于在组件实例挂载到 DOM 后执行某些操作。它的作用是让你在组件挂载（渲染）完成后执行一些副作用操作，例如发起网络请求、添加事件监听器、操作 DOM 等。

onMounted 的作用：

1. 组件挂载后执行操作：
   onMounted 会在组件的模板渲染并挂载到 DOM 上之后执行。这是一个常用的生命周期钩子，用于进行初始化操作，比如发起异步请求或初始化一些需要 DOM 元素的逻辑。

2. 适用于副作用操作：
   你可以在 onMounted 钩子中执行一些副作用操作。副作用是指那些对系统外部状态有影响的操作，比如修改全局状态、发起 API 请求、修改 DOM 等。

示例代码

import { onMounted, ref } from 'vue';

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

    // 在组件挂载完成后执行的操作
    onMounted(() => {
      console.log('组件已挂载');
      // 假设在组件挂载后发送一个网络请求
      setTimeout(() => {
        message.value = '数据加载完成';
      }, 2000);
    });

    return { message };
  }
};

在上面的例子中：

• onMounted 在组件挂载到 DOM 上之后被调用。
• 在 onMounted 钩子中，我们模拟了一个网络请求操作，并且修改了响应式数据 message。

与 Vue 2.x 生命周期钩子的关系

在 Vue 3 中，onMounted 对应的是 Vue 2.x 中的 mounted 生命周期钩子。它们的作用基本相同：都在组件的模板渲染完成并挂载到 DOM 后执行。

什么时候使用 onMounted？

onMounted 适用于需要在 DOM 已渲染完成后执行的操作，比如：

• 发起异步请求：获取数据并渲染到页面上。
• 操作 DOM：需要依赖于组件的 DOM 元素（例如，使用第三方库初始化图表、地图库等）。
• 添加事件监听器：在组件挂载后添加一些事件监听。

注意事项：

• onMounted 是 异步执行的。它会在挂载过程中，所有的 DOM 渲染完成后才会执行。
• 如果你需要在 模板渲染前 执行某些操作，应该使用 onBeforeMount 钩子。
• 在 onMounted 中进行的数据更新会触发视图更新，但此时 DOM 已经存在，因此不会影响初次渲染。

示例 2：操作 DOM 元素

假设我们需要在组件挂载后获取某个 DOM 元素的尺寸或执行其他 DOM 操作，可以在 onMounted 中进行：

import { onMounted, ref } from 'vue';

export default {
  setup() {
    const element = ref(null);

    onMounted(() => {
      // 获取 DOM 元素的宽度
      const width = element.value.offsetWidth;
      console.log('元素的宽度:', width);
    });

    return { element };
  },
  template: `<div ref="element">Hello Vue</div>`
};

在这个例子中，我们通过 ref 获取了一个 DOM 元素，onMounted 会在元素渲染后执行，获取该元素的宽度。

总结

• onMounted 是 Vue 3 Composition API 的生命周期钩子，执行组件挂载后的副作用操作。
• 它在组件模板渲染并挂载到 DOM 上后执行，适用于发起异步请求、操作 DOM 等任务。
• 在 Vue 2.x 中，onMounted 对应的是 mounted 钩子。