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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
基于node.js之调试器详解
Aug 22 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 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
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP中串行化用法示例
2016/11/16 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
实用框架(iframe)操作代码
2014/10/23 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python3实现定时任务的四种方式
2019/06/03 Python
WxPython实现无边框界面
2019/11/18 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
Python实现像awk一样分割字符串
2020/09/15 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
1亿有多大教学反思
2014/05/01 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
教师求职自荐信
2015/03/26 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python