vue中使用refs定位dom出现undefined的解决方法

站长资源 2024/11/28 佚名

2 0 1

之前在公司做项目，一直感觉用ref来定位dom节点挺方便的。但是期间遇到了一个问题，就是在mounted(){}钩子里面使用this.$refs.xxx，打印出来的却是undefined？

于是我就对比了一下之前使用ref定位的.vue文件，发现了他们之间的区别。

我们要想知道为什么会定位不到某个DOM节点，我们首先要理解mounted(){}这个钩子函数是用来做什么的。

下面是vue官方给出的vue生命周期（部分），正如官方所说的一样，一开始不必先理解，不过随这你的学习与使用，他的参考价值会越来越高。

原来，mounted阶段，DOM结构准备就绪，但是这里的准备就绪需要特别说明一下：

DOM结构已经出来了，但是如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for（即根据获得的后台数据来动态操作DOM，即响应式），那么这些DOM是不会再mounted阶段找到的。

此时的mounted阶段，一般是用于发起后端请求，拿回数据，配合路由钩子做一些事情，简单来说就是在mounted钩子中加载数据而已，加载回来的数据是不会再这个阶段更新的DOM中的

所以如果在mounted钩子中使用$refs，如果ref是定位在有v-if、v-for、v-show中的DOM节点，返回来的只能是undefined，因为在mounted阶段他们根本不存在！！

经过检验，上面端文字是错误的，$refs定位不到的主要原因是因为v-if、v-for、v-show这些语句如果依赖父组件传来的参数的话，该该参数是在mounted()阶段子还没获取得到~~~~！！！！

如果想要真正地在DOM加载完成后拿到数据，就需要调用VUE的全局api ： this.$nextTick(() => {})

如果说mounted阶段是加载阶段，那么updated阶段则是完成了数据更新到DOM的阶段(对加载回来的数据进行处理)，此时，ref、数据等等全部都挂载到DOM结构上去，在update阶段使用this.$refs.xxx，就100%能找到该DOM节点。

updated与mounted不同的是，在每一次的DOM结构更新，vue都会调用一次updated(){}钩子函数！而mounted仅仅只执行一次而已

简单来说，只要在调试的时候，能看到元素的存在，在updated阶段都可以使用this.$refs.xxx找到对应的DOM节点！

关于$refs的使用，官方文档特别给出了以下提示：

使用的时候就注意咯- -

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue,refs定位dom,vue,refs,undefined,vue,refs,dom

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“vue中使用refs定位dom出现undefined的解决方法”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

2024年11月28日