vue中ref标签属性和$ref的关系解读
作者：考拉菜鸟
vue ref标签属性和$ref关系
javascript原生语法和jquery都是属于操作DOM节点元素，去实现功能的.
Vue给我们提供了一个专门用来获取DOM节点的方法，使用元素的ref属性，使用起来非常方便。
(这只是用于偶尔vue需要操作节点时候才使用)
vue的ref属性
ref 被用来给元素或子组件注册引用信息。
引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
<!-- `vm.$refs.p` will be the DOM node --> <p ref="p">hello</p> <!-- `vm.$refs.child` will be the child component instance --> <child-component ref="child"></child-component>
当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。
关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
vm.$refs
一个对象，持有 注册过 ref 特性 的所有 DOM 元素和组件实例。
以上是官方文档里面的内容,总结为下面的：
- 给要获取的元素节点添加ref属性，使用有意义的驼峰命名
- 通过vue实例.$refs.属性名即可获取标记的元素，我们在mounted钩子函数中调用可以直接使用this指向当前vue实例，这个才是vue推荐的元素获取方式
- 如果ref重名后面的会把前面的覆盖
- 元素使用v-for,返回dom节点数组
下面举例验证
<div id="app">
<div>
<h2 ref="name1">这是name1节点元素</h2>
<p ref="name2">这是name2节点元素</p>
</div>
</div> mounted() {
console.log(this); //vue实例对象
console.log(this.$refs.name1); //上面的h2标签元素
console.log(this.$refs.name1.textContent); //标签内容
console.log(this.$refs.name2); //上面的p标签元素
},
如果ref值重复时,会打印出哪个DOM节点? 根据上面的知识点，我们知道,后面的会覆盖前面的
下面验证一下：
<div id="app">
<h2 ref="name1">这是name1节点元素</h2>
<p ref="name2">这是name2节点元素</p>
<span ref="name1">这是ref的name1值重复的节点元素</span><br>
<i ref="name2">这是ref的name2值重复的节点元素</i><br>
</div> 一样在代码中执行以下命令
mounted() {
console.log(this); //vue实例对象
console.log(this.$refs.name1); //上面的h2标签元素
console.log(this.$refs.name1.textContent); //标签内容
console.log(this.$refs.name2); //上面的p标签元素
},
打印结果是span和i标签元素，覆盖了前面的h2和p标签
如果把ref值设置ul标签
<ul ref="veg"> <li>水果1</li> <li>水果2</li> <li>水果3</li> </ul>
执行
console.log(this.$refs.veg);
直接打印出整个DOM对象
当v-for用于元素和组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。
<div id="app">
<ul>
<li ref="fruits" v-for="(item,index) in arr" :key="index">水果{{item}}</li>
</ul>
</div> const app = new Vue({
el: '#app',
mounted() {
console.log(this.$refs.fruits); //打印的是li标签数组
console.log(this.$refs.fruits[1].textContent);
},
data: {
arr: [1, 2, 3, 4, 5],
},
});运行
console.log(this.$refs.fruits);
以后得到的数组
新手对vue中特殊的标签属性ref和key的理解
ref属性
- 定义：用来给元素或子组件注册引用信息
- 理解：类似id（原生js中id的替代者），给元素或者组件打标识
作用
1、应用在html标签上，是用来获取真实的DOM元素（相当于原生的document.getElementById("xxx")）
2、应用在组件标签上，得到的是组件的实例对象
使用方式
第一步：打标识
<h1 ref="xxx">...</h1> <School ref="xxx"></School>
第二步：获取
this.$refs.xxx
ref属性与原生的id属性的区别
1、添加在html标签上
两者结果相同，都是得到真实的DOM元素
2、添加到组件上
- ref属性获取的是组件实例对象
- id属性相当于给组件最外层容器添加了id属性，得到的是最外层包裹着的所有真实DOM元素
key属性
理解：给虚拟DOM对象添加标识，相当于给每个元素添加一个独一无二的id身份
作用：当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新旧虚拟DOM的差异对比，比较规则如下：
对比规则
1、旧虚拟DOM中找到与新虚拟DOM相同的key
- ① 若虚拟DOM中的内容没有变化，那么直接使用之前的真实DOM
- ② 若虚拟DOM中的内容变化了，则生成新的真实DOM，随后替换掉页面之前的DOM
2、新虚拟DOM中未找到与旧虚拟DOM相同的key
创建真实的DOM，随后渲染到页面
用index作为key可能引发的问题
1、若对数据进行：逆序添加和删除等破坏数据顺序的操作
会产生没有必须的真实DOM更新，页面效果没问题，但效率低
2、若结构中包含输入类的DOM
会产生错误的DOM更新，页面出现问题
开发中如何选择key？
- ① 如果数据有唯一标识，比如id，身份证号，学号等，可以直接使用数据的唯一标识
- ② 如果不存在逆序等破坏顺序的操作，仅用于渲染展示，那么使用index作为key值没有问题
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。