官網(wǎng)上的說明

一、前言#

　　在之前的前端開發(fā)中，為了實現(xiàn)我們的需求，通常采用的方案是通過 JS/Jquery 直接操縱頁面的 DOM 元素，得益于 Jquery 對于 DOM 元素優(yōu)異的操作能力，我們可以很輕易的對獲取到的 DOM 元素進行操作。但是，當我們開始在前端項目中使用 Vue 這類的 MVVM 框架之后，對于 DOM 的操作我們就應(yīng)當完全的交給框架，而我們只需要關(guān)注于數(shù)據(jù)。難道，在 Vue 中就不能手動獲取到頁面上的 DOM 元素了嗎，答案當然是可以手動獲取到 DOM 元素的，在 Vue 中我們可以通過使用 ref 實現(xiàn)獲取 DOM 元素的功能，當然，這也只是 ref 其中一項的功能。本章，我們就來學(xué)習(xí) Vue 中 ref 的相關(guān)使用。

　　倉儲地址：https://github.com/Lanesra712/VueTrial/blob/master/chapter02-bronze/ref.html

 二、干貨合集#

　　ref 在 Vue 中是用來給元素或是子組件注冊引用信息到父組件或是 Vue 實例上，注冊后的引用信息都會呈現(xiàn)在父組件/Vue 實例的 $.refs 上，這時，我們就可以通過 $.refs 獲取到引用的 DOM 對象或是子組件信息。

　　例如，我們可以獲取到頁面上添加了 ref 的 input 輸入框的值，對于子組件來說，我們可以直接獲取到子組件 data 選項中的數(shù)據(jù)，或是直接調(diào)用子組件的方法。

　　1、虛擬 DOM#

　　在我們使用 JS/Jquery 直接對 DOM 元素進行操作時，不管是對元素樣式的修改（背景顏色從紅色變成藍色）還是對頁面中的某些布局進行動態(tài)調(diào)整（通過點擊按鈕在列表中添加一行新的數(shù)據(jù)），這都會造成頁面的重新渲染，從而影響我們網(wǎng)站的性能。而在 Vue 中，通過在內(nèi)存中生成與真實 DOM 與之對應(yīng)的數(shù)據(jù)結(jié)構(gòu)（虛擬 DOM），當頁面發(fā)生變化時，通過新的虛擬 DOM 樹與舊的虛擬 DOM 樹進行比對，就能很快的找出差異點，從而得出應(yīng)施加到真實 DOM 上的改動。

　　2、使用 ref 獲取頁面 DOM 元素#

　　在使用 JS/Jquery 獲取頁面的 DOM 元素時，我們一般是根據(jù) id、class、標簽、屬性等其它標識來獲取到頁面上的 DOM 元素。嗯，可以說，我們很難拋棄 Jquery 的一個重大原因，就是當我們需要獲取到頁面上的 DOM 元素時，使用 Jquery 的 API 相比于原生的 JS 代碼，簡單到極致，有木有。

document.getElementById('id').value => $('#id').val()

　　那么，難道我們在 Vue 中獲取 DOM 元素還是采用這樣的方式？

　　答案當然是否定的，這種直接操縱 DOM 元素的方式，與我們使用 Vue 的初衷不符，雖然能達成效果，但是卻不提倡，這里我們就可以使用 ref 來獲取頁面上的 DOM 元素。

　　在下面的代碼中，我在 input 上添加了一個 ref 屬性，之后，我們就可以在 Vue 實例中獲取到這個 input 輸入框的值。這里，我在 beforeMount、mounted 這兩個 Vue 中的生命周期鉤子函數(shù)以及一個按鈕的點擊事件中嘗試獲取到這個 input 輸入框的值。

<div id="app">
 <input type="text" ref="msgText" v-model="msg" />
 <button @click="getElement">獲取元素值</button>
</div>

<script>
 var vm = new Vue({
  el: "#app",
  data: {
   msg: 'Hello ref'
  },
  beforeMount() {
   console.log('beforeMount: ' + this.$refs.msgText.value)
  },
  mounted() {
   console.log('mounted: ' + this.$refs.msgText.value)
  },
  methods: {
   getElement() {
    console.log(this.$refs.msgText.value)
   }
  }
 });
</script>

　　運行代碼，從結(jié)果中可以看到，在 beforeMount 這個鉤子函數(shù)中，我們是無法獲取到這個 DOM 元素的值，結(jié)合之前學(xué)習(xí)的 Vue 生命周期的相關(guān)知識，當執(zhí)行到 beforeMount 鉤子函數(shù)時，Vue 雖然已經(jīng)將模板編譯完成，但是尚未掛載到頁面 DOM 元素上，因此我們可以得出 ref 是在頁面渲染完成后才被創(chuàng)建的。

　　可以看到，當我們在 input 輸入框中添加了 ref 屬性后，在當前的 Vue 實例的 $.refs 上就掛載了當前的 input 框?qū)ο蟆?/p>

　　3、使用 ref 獲取子組件對象#

　　同使用 ref 獲取頁面的 DOM 元素相似，當我們需要獲取子組件時，只需要將使用到子組件上的地方添加 ref 屬性即可。在下面的示例代碼中，我添加了一個子組件，當我們點擊 Vue 實例上的按鈕時，會先調(diào)用子組件的方法，然后獲取子組件的數(shù)據(jù)。

<div id="app">
 <input type="text" ref="msgText" v-model="msg" />
 <button @click="getElement">獲取元素值</button>

 <hr>

 <child ref="childComponent"></child>
</div>

<template id="child">
 <div>
  <input type="datetime" name="datetime" v-model="local">
  <button @click="getLocalData">獲取當前時間</button>
 </div>
</template>

<script>
 var vm = new Vue({
  el: "#app",
  data: {
   msg: 'Hello ref'
  },
  mounted() {
   console.log('mounted: ' + this.$refs.msgText.value)
  },
  methods: {
   getElement() {
    console.log('input 輸入框的值為：' + this.$refs.msgText.value)
    this.$refs.childComponent.getLocalData()
    console.log('子組件 input 輸入框的值為：' + this.$refs.childComponent.local)
   }
  },
  components: {
   'child': {
    template: '#child',
    data() {
     return {
      local: ''
     }
    },
    methods: {
     getLocalData() {
      var date = new Date()
      this.local = date.toLocaleString()
     }
    },
   }
  }
 });
</script>

　　可以看到，當我們將 ref 添加到子組件上，我們就可以在 Vue 實例上獲取到這個注冊的組件引用，同注冊的 DOM 元素一樣，我們都可以使用添加的 ref 屬性值作為 key 獲取到注冊的對象。此時，我們就可以獲取到這個子組件上的 data 選項和 methods 選項。

三、總結(jié)#

　　因為 Vue 采用 Virtual DOM 的做法渲染網(wǎng)頁，如果我們直接操作 DOM，很容易產(chǎn)生實際網(wǎng)頁跟 Vue 產(chǎn)生的 Virtual DOM 不同步的問題，而通過使用 ref 屬性之后，在一些需要獲取 DOM 元素的情況下，我們就可以很方便的獲取 DOM 元素。當然，當我們決定在項目中使用 Vue，還是需要轉(zhuǎn)變我們的思路，將操作 DOM 轉(zhuǎn)變成操作數(shù)據(jù)。同樣的，通過將 ref 屬性添加到子組件上，我們就可以很輕松的獲取到子組件的相關(guān)信息，這無疑給父組件獲取子組件數(shù)據(jù)、調(diào)用子組件的方法提供了一種新的思路。

以上所述是小編給大家介紹的Vue 中 ref 的使用,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論