正文
vue中$refs的用法及作用详解
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一般来讲，获取DOM元素，需要使用document.querySelector('#input1')方法去获取dom节点，然后再获取input1的值。
但是使用了ref绑定之后，我们就不需要再获取dom节点了，可以直接在上面的input上绑定input1，然后$refs里面调用就行。
在JavaScript里面通过this.$refs.input1去调用，这样的做法实际上是访问VUE虚拟出来的DOM，可以有效减少获取/操作DOM节点的性能消耗。
HTML
<div id="app">
<input type="text" ref="input1" />
<button @click="add">添加</button>
</div>
JavaScript
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗
}
}
})
这里的$refs可以看做是ref的选择器，这个$ref是一个对象，通过key可以获取到其中存放的对象。
当然了，既然是对象，也可以使用方括号运算符去访问，具体是this.$refs[input1]。
"我只是怕我再也见不到你了。"
