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

這裡的$refs可以看做是ref的選擇器，這個$ref是一個對象，通過key可以擷取到其中存放的對象。

當然了，既然是對象，也可以使用方括号運算符去通路，具體是this.$refs[input1]。

"很多事情上都可以努力，但人與人之間不行，能走到最後的，其實一開始，就是同路人。"

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

new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value = "test"; // 有效減少擷取dom節點的性能消耗
    }
  }
})