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


Posted in Javascript onDecember 21, 2017

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

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

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

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

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

原来,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出现undefined的解决方法 

使用的时候就注意咯- -

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
Dec 21 #Javascript
利用node实现一个批量重命名文件的函数
Dec 21 #Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 #Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 #Javascript
开发Vue树形组件的示例代码
Dec 21 #Javascript
详解使用vuex进行菜单管理
Dec 21 #Javascript
Angular5.1新功能分享
Dec 21 #Javascript
You might like
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP实现变色验证码实例
2014/01/06 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP的拦截器实例分析
2014/11/03 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
Python Web编程之WSGI协议简介
2018/07/18 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
市场营销专科应届生求职信
2013/11/24 职场文书
社区工作者思想汇报
2014/01/13 职场文书
中学生差生评语
2014/01/30 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
外出考察学习心得体会
2016/01/18 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js