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中的常用算法与函数
Nov 21 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
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
php数组的概述及分类与声明代码演示
2013/02/26 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
用js重建星际争霸
2006/12/22 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python模拟Django框架实例
2016/05/17 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
应届生人事助理求职信
2013/11/09 职场文书
团日活动总结书格式
2014/05/08 职场文书
工程售后服务承诺书
2014/05/21 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
话题作文之自信作文
2019/11/15 职场文书