vue中onmounted周期里获取不到dom的原因

已于 2023-12-12 16:28:50 修改
阅读量1.2k 收藏 10
点赞数 6
文章标签： vue.js javascript 前端
于 2023-12-12 16:00:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zn_firm/article/details/134951755
版权
本文讲述了在Vue.js中，如何在`onMounted`阶段获取静态DOM，以及动态DOM（特别是v-if和v-for情况下的区别）。强调了v-show即使值为false也能获取到DOM，而v-if则不行。提供了解决方案：在`nextTick`或`onUpdated`中获取DOM。
摘要由CSDN通过智能技术生成

在onmounted里可以获取到任意一个静态的dom，注意，这里说的是静态dom，对于动态dom，他是获取不到的

动态dom有2种情况：1）带有v-if指令，获取不到值为false的那个dom

                                  2)带有v-for指令，当初始化时，要循环的数组没有值，这个时候是获取不到                                        相关dom的

重点：有v-show指令时,即使值为false，依旧能获取到相应的dom，切记他和v-if不一样

解决方法：1）在nexttick中获取dom

                   2)在onUpdated中获取dom

zn_firm
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3--ref使用（解决ref无法获取dom元素的问题）
韦_恩的博客
05-18 5万+
众所周知在vue2中，ref主要的作用还是便于快速的获取dom元素或组件，因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。 具体关于vue2中ref和$refs的使用，这篇文章写的十分全面： https://www.cnblogs.com/xumqfaith/p/7743387.html 本文还是针对Vue3中ref使用进行说明，重点是模板ref的使用。 1. ref用法1：基本类型封装，使数据响应式 vue3中为了节约资源，并不是全部数据都会进行响.
Vue 3 中的 ref() 如何使用空引用获取 DOM 元素
lfeishumomol的博客
06-06 391
4.ref() 执行的时候dom元素还未渲染 如何绑定的 当使用 ref 创建一个引用对象时，确实在执行 ref() 的时候并没有拿到 DOM 元素。ref() 返回的是一个响应式对象，其中包含一个 .value 属性，初始时这个 .value 属性是 undefined。 然而，在 Vue 组件渲染后，Vue 会自动将对应的 DOM 元素赋值给 ref 创建的引用对象的 .value 属性。这个过程是由 Vue 在组件的生命周期中完成的，在组件渲染后，Vue 会查找模板中使用 ref 指令标记的元素
vue3路由跳转 跳转新页面后不执行onMounted
最新发布
One__buyaomanggu的博客
07-06 555
watch(nums, (newValue, oldValue) => {console.log('watch 已触发', newValue)})vue3 跳转页面不执行onMounted：用watch函数。//跳转到生产记录页面。
vue3在mounted中获取元素null
qq_48217454的博客
07-07 515
【代码】vue3在mounted中获取元素null。
vue3中因为加载顺序而造成的找不到dom实例
chelflan's blog
08-10 759
vue3中因为加载顺序而造成的找不到dom实例
vue中使用$refs获取不到DOM元素
yangy_u的博客
12-09 9423
this.$refs.xx 为 undefined 的几种情况： 1. 在created 钩子函数中调用： create()在实例创建完成后被立即调用。这时，实例已完成数据观测、属性和方法的元素，watch/event事件回调。但是，挂载阶段还没有开始，所以this.$refs获取不到DOM。 2. 获取的是设置了v-if/v-show的元素： 如果在DOM结构中的某个DOM节点使用了v-if、v-show或v-for（根据后台数据动态操作DOM），那么这些DOM 在mounted阶段是不存在的。 在mou
vue3使用echart在mounted获取不到dom，报错：Initialize failed: invalid dom.
ljqzxw的博客
08-04 904
【代码】vue3使用echart在mounted获取不到dom，报错：Initialize failed: invalid dom.
vue中mounted中无法获取到dom元素
weixin_34267123的博客
10-10 6206
一、解决方案： 加上异步setTimeout，延迟获取dom的代码的执行 mounted() { // debugger this.$nextTick(()=> { setTimeout(()=> { let el = document.querySelector('.table') console.lo...
关于Vue组件无法通过Dom获取元素的问题
qq_41045128的博客
07-06 3644
解决vue组件无法获取Dom元素的问题
解决vue页面渲染但dom没渲染的操作
10-15
这通常是由于Vue的响应式系统未能及时检测到数据变化，或者是在Vue生命周期的不恰当时间进行了DOM操作。以下是一些解决Vue页面渲染但DOM未渲染问题的方法： 1. **使用`this.$nextTick()`**： 在数据更新后，Vue会...
vue3 ref查找dom元素，解决ref无法获取dom元素的问题
fanlao4203的博客
06-15 1519
vue3.2
解决vue页面DOM操作不生效的问题
08-27
下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 页面回退mounted函数不执行的解决方案
10-15
总的来说，理解和掌握 Vue 的生命周期以及 `keep-alive` 的工作原理，对于解决页面回退时数据不更新的问题至关重要。通过使用 `activated` 钩子和适当的数据监听，可以确保组件在回退时能够正确地更新和展示数据。在...
Vue3通透教程【八】获取DOM、操作组件
热门推荐
官方推荐
03-09 1万+
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事尤大大对前端生态是这样看的。
笔记：vue3 ref查找dom元素，解决ref无法获取dom元素的问题
qiyujie_123的博客
12-03 7564
vue3 ref查找dom元素，解决ref无法获取dom元素的问题
[Vue] mounted阶段获取不到dom的原因及解决方法
老电影故事的博客
05-09 9705
问题描述 需要在dom渲染后，获取dom来进行页面自动滚动到需要的位置。 在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种方式获取元素，打印出来的结果都是undefined。 有解答说用this.nextTick(function(){…})，试了一下在我这个场景中，结果还是undefined 分析原因 在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。 v-if的初始化结果为false。v-for遍历的数组初始化
vue 动态组件名_vue动态加载组件mounted无法获取dom的解决思路
weixin_39748858的博客
11-20 1026
有时我们在mouted方法中想通过id读取到一个dom元素，虽然官方并不推荐这种方法来操作dom。但难免有碰到这种情况，如下面一个dom元素试图在mouted中获取 试图在nextick中获取 结果还是为空究其原因，还是该dom元素未在文档中生成。所以用document.getelementId 是无法获取到该元素的解决方法在vue文档中 关于的自定义指示器中有这么一段话通过自定义指示器的ins...
vue3 获取DOM元素得到null
weixin_43996255的博客
05-08 472
通过document.getElementById('three')获取div元素为null，但是通过document.getElementById('app')可以得到。同步执行js时，id为app的div已经加载完了，但是组件中的dom还没有加载完，所以通过异步的方式获取到。这nextTick钩子中获取元素。
vue3 onmounted
08-28
在Vue3中，onMounted是一个生命周期钩子函数，它在组件挂载到DOM之后执行。在这个钩子函数中，你可以执行一些需要在组件渲染之前完成的操作。对于引用中的PostList组件来说，onMounted钩子函数可以用来在组件渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值