当前位置: 首页 > Web前端 > vue.js

【Vue】mounted阶段获取不到DOM的原因及解决方法

时间:2023-03-31 23:43:44 vue.js

说明:DOM渲染完成后,需要遍历页面中的各个模块元素,获取各个模块的高度。mounted阶段无法获取到通过document.querySelector()和this.$refs获取的元素。两种方式获取元素,打印结果未定义。有的回答说用this.$nextTick(function(){...}),在我的场景中试了一下,结果还是undefined。原因:在挂载阶段,如果要获取的元素或组件有v-if、v-for属性。v-if的初始化结果为false。v-for遍历的数组初始化阶段没有任何价值。(即mounted阶段后,根据获取到的后台数据动态操作dom)这两种情况都会导致mounted阶段获取元素的语句获取不到dom。示例如下:页面如下图,控制台输出如下图解决方法:1、将获取元素的语句放在异步获取的数据中,赋值给key中数据。同时需要在获取元素的语句中加上setTimeout。因为setTimeout是一个宏任务,所以会在vue的render函数执行完之后执行。2.将获取元素的语句放入更新循环中执行。在这种情况下,获取元素的语句将在每次视图更新后执行。如果不需要在每次视图更新后都执行,可以使用this.$once("hook:updated",function(){inthemountedcycle....}),这样得到的语句元素仅在更新阶段执行一次。