官網(wǎng)上的說(shuō)明

一、前言#

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

　　倉(cāng)儲(chǔ)地址：https://github.com/Lanesra712/VueTrial/blob/master/chapter02-bronze/ref.html

 二、干貨合集#

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

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

　　1、虛擬 DOM#

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

　　2、使用 ref 獲取頁(yè)面 DOM 元素#

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

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

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

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

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

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

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

　　3、使用 ref 獲取子組件對(duì)象#

　　同使用 ref 獲取頁(yè)面的 DOM 元素相似，當(dāng)我們需要獲取子組件時(shí)，只需要將使用到子組件上的地方添加 ref 屬性即可。在下面的示例代碼中，我添加了一個(gè)子組件，當(dāng)我們點(diǎn)擊 Vue 實(shí)例上的按鈕時(shí)，會(huì)先調(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">獲取當(dāng)前時(shí)間</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>

　　可以看到，當(dāng)我們將 ref 添加到子組件上，我們就可以在 Vue 實(shí)例上獲取到這個(gè)注冊(cè)的組件引用，同注冊(cè)的 DOM 元素一樣，我們都可以使用添加的 ref 屬性值作為 key 獲取到注冊(cè)的對(duì)象。此時(shí)，我們就可以獲取到這個(gè)子組件上的 data 選項(xiàng)和 methods 選項(xiàng)。

三、總結(jié)#

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

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

最新評(píng)論