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節點的性能消耗
    }
  }
})