vue$refs的用法【详解】

在用VUE开发项目的时候，经常会使用到$refs来操作DOM，那么它究竟该怎么使用呢？

首先，平时在用JS开发项目的时候，获取DOM元素，使用的是 document.querySelector("#id") 来获取DOM元素，并且可以操作或获取其属性，例如获取 input 的 value 值。

如果是使用VUE，可以使用 ref 来进行绑定，就不需要获取DOM节点了，然后通过 $refs 来进行操作或获取属性。

例如使用 JavaScript 里面通过 this.$refs.input1 去调用，这样的做法实际上是访问VUE虚拟出来的DOM，可以有效减少获取/操作DOM节点的性能消耗。

示例：

<div id="app">
  <input type="text" ref="input1" />
  <button @click="add">添加</button>
</div>

代码：

add:function(){
  // this.$refs[input1].value = "test"; // 可以用运算符去访问
  this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗
}

这里的 $refs 相当于是一个通用选择器，然后通过 key 去访问存储的对象。

打完收工！