全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

onMounted方法详解

发布时间:2023-11-22 15:53:34
发布人:xqq

一、什么是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)来处理副作用。

onmounted

相关文章

video封面图的完整指南

video封面图的完整指南

2023-11-22
如何修改nginx配置文件

如何修改nginx配置文件

2023-11-22
linux收到对方端口的数据再转发出去,linux实现端口转发

linux收到对方端口的数据再转发出去,linux实现端口转发

2023-11-22
xysubfilter详解

xysubfilter详解

2023-11-22

最新文章

武汉新媒体行业公司排名

武汉新媒体行业公司排名

2023-11-01
武汉新媒体就业现状好吗

武汉新媒体就业现状好吗

2023-11-01
武汉全媒体行业发展现状及趋势

武汉全媒体行业发展现状及趋势

2023-10-31
武汉全媒体现状

武汉全媒体现状

2023-10-31
在线咨询 免费试学 教程领取