一般來講，獲取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]。