vue中使用refs定位dom出现undefined的解决方法
之前在公司做项目,一直感觉用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的使用,官方文档特别给出了以下提示:
使用的时候就注意咯- -
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- FastJson 反序列化注意事项
- Python编写渗透工具学习笔记二 | 0x05编写脚本劫持tcp会话
- linux下socket编程
- java与openssl的rsa算法互
- Python编写渗透工具学习笔记二 | 0x04编写程序分析流量检测ddos攻击
- Python编写渗透工具学习笔记二 | 0x03用python构建ssh僵尸网络
- Python编写渗透工具学习笔记二 | 0x02利用FTP与web批量抓肉鸡
- linux 网络编程之信号机制
- im4java + imagemagic 搭建一个图片处理服务
- # Java 一步一步实现高逼格的字符串替换工具(二)
- 专题 | Python编写渗透工具学习笔记二
- Java 一步一步实现高逼格的字符串替换工具(一)
- Python编写渗透工具学习笔记一 | 0x05抓取应用的banner --推断服务
- Logback 简明使用手册
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Swagger 3.0 官方 starter 诞生了,其它的都可以扔了~
- 原码+反码+补码概述与示范
- HTTP客户端连接,选择HttpClient还是OkHttp?
- 数据类型(基本数据类型和引用数据类型)范围与字符转换,代码示例+个位十位百位相加面试题
- Scanner关键字的使用+代码介绍+注意事项
- 将一个txt文件,复制到另一个txt文件中(缓冲字节流(BufferedInputStream,BufferedOutputStream))
- java实现客户端服务端互发消息并接收
- 使用NIO实现非阻塞式(相对的)多人聊天室
- 三次握手与四次挥手+图解
- 单例模式-->饿汉式+懒汉式
- 非常有必要了解的Springboot启动扩展点
- 冒泡排序图解+代码示例
- 使用prepareStatement连接数据库实现增、删、改、查
- 插入排序图解与代码示例
- 初步使用Druid连接池+代码示例:对图书进行增删改查