onMounted方法详解

RXON • 2024-11-02 13:11 • 编程

一、什么是onMounted方法

onMounted 方法是 Vue.js 组件选项中的一个钩子函数，它会在组件挂载完成后被调用。

在这一步，组件已经完成了以下几个过程：模板编译、执行 render 函数、把 render 函数执行的结果挂载到页面上成为真实 DOM、触发 beforeMount、完成真实 DOM 渲染等过程。

如果我们需要在组件完全挂载到 DOM 树上后再对 DOM 或组件进行操作，就可以使用 onMounted 这个钩子函数。

二、onMounted方法用法

使用 onMounted 方法需要先引入 “vue”，然后在组件中使用 setup 函数创建一个返回对象。

在这个返回对象中，可以有多个方法和属性，其中 onMounted 就是其中之一。

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      //todo
    })
  }
}

三、onMounted方法的应用场景

1. Ajax请求数据

当我们需要通过 Ajax 请求远程数据时，应该在整个组件构造完成并挂载完毕后再发起请求。

如果我们在 created 或 mounted 阶段就直接请求数据，那么可能会遇到一些问题，比如请求数据需要一些时间，但是在这段时间内，组件已经进行了处理，数据返回后需要重新处理组件，这样会带来一些不必要的性能损失。

因此，使用 onMounted 钩子函数可以确保我们在组件完全挂载到 DOM 树上后再进行数据请求。

import { reactive, onMounted } from "vue";

export default {
    setup() {
        const state = reactive({ items: [] });
        
        onMounted(async () => {
            const res = await fetch("https://api.example.com/items");
            state.items = await res.json();
        });

        return { state };
    }
}

2. 处理 DOM 元素

当我们需要使用原生 API 对 DOM 元素进行操作时，需要等到它挂载完成后再进行操作。

使用 onMounted 钩子函数，可以确保 DOM 元素已经完全挂载到页面上后再进行操作，这样可以避免操作未挂载完毕的元素，避免出现一些未知的问题。

import { onMounted } from "vue";

export default {
    setup() {
        onMounted(() => {
            const ele = document.getElementById("my-ele");
            ele.style.color = "red";
        })
    }
}

3. 优化组件初始化效率

在组件的 created 和 mounted 阶段，Vue.js 都会执行大量的代码，包括响应式数据的挂载等。

使用时机合理的 onMounted 钩子函数，可以将一部分初始化代码延迟到组件已完全挂载后再执行，从而提升组件初始化的效率。

四、onMounted方法注意事项

使用 onMounted 钩子函数时需要注意以下几点：

1. onMounted 钩子函数只能在 setup 函数中调用；

2. setup 函数必须返回一个对象，否则 onMounted 钩子函数无法调用；

3. 避免在 onMounted 钩子函数中频繁调用 setState 等方法，这会导致组件频繁更新，降低性能；

4. 官方推荐使用异步函数（async/await）来处理副作用。

原创文章，作者：RXON，如若转载，请注明出处：https://www.506064.com/n/147659.html