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 去訪問存儲的對象。

打完收工！