在用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 去訪問儲存的物件。

打完收工！