快捷導(dǎo)航

Vue項(xiàng)目中數(shù)據(jù)的深度監(jiān)聽(tīng)或?qū)ο髮傩缘谋O(jiān)聽(tīng)實(shí)例

更新時(shí)間：2020年07月17日 10:02:54 作者：_cris

這篇文章主要介紹了Vue項(xiàng)目中數(shù)據(jù)的深度監(jiān)聽(tīng)或?qū)ο髮傩缘谋O(jiān)聽(tīng)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

眾所周知，vue項(xiàng)目中對(duì)數(shù)據(jù)的監(jiān)聽(tīng)，提供了一個(gè)很好的鉤子watch，watch可以極其方便的監(jiān)聽(tīng)我們常用數(shù)據(jù)類(lèi)型值的變化，但通常當(dāng)我們想監(jiān)聽(tīng)一個(gè)對(duì)象中，某個(gè)屬性值的變化時(shí)，很難達(dá)到我們預(yù)期的效果。根據(jù)vue的文檔，不難發(fā)現(xiàn)，使用數(shù)據(jù)的深度監(jiān)聽(tīng)來(lái)達(dá)到這一效果。具體實(shí)現(xiàn)如下：

watch: {
  evlist: {
  handler(val, oldVal) {
   this.isTeam = val.projectParty;
   this.pjtid = val.pjtid;
   this.isFinish = val.projectSelfValue;
  },
  deep: true
  },
 
 },

這其中，evlist是一個(gè)對(duì)象，val監(jiān)聽(tīng)到變化后的值，oldVal是變化前的值。

補(bǔ)充知識(shí)：vue中的監(jiān)聽(tīng)屬性和計(jì)算屬性

計(jì)算屬性（computed）

vue中的計(jì)算屬性是非常棒的東西，它兼具了邏輯和變量?？梢宰屛覀儾辉訇P(guān)注視圖層，值關(guān)注代碼的邏輯即可。至于數(shù)據(jù)如何展現(xiàn)則只需由Vue負(fù)責(zé)，不需要我們的參與。

所以如果在面臨選擇是使用計(jì)算屬性還是監(jiān)視屬性的情況下，優(yōu)先選擇計(jì)算屬性

  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

export default {
  data(){
   return { 
    message: 'Hello',
   }
  },
  computed: {
   reversedMessage: function () {
    return this.message.split('').reverse().join('');
   }
  }

可以看到我們使用的計(jì)算屬性替代了模板內(nèi)表達(dá)式的功能。所以，對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性。而且計(jì)算屬性讓我們只關(guān)注于邏輯實(shí)現(xiàn)，至于后期的數(shù)據(jù)在界面上的表示形式則直接由Vue.js負(fù)責(zé)，讀者可以看到我們并沒(méi)有直接參與頁(yè)面展示上面來(lái)

此外，傳統(tǒng)的直接通過(guò)表達(dá)式求值的方式需要我們自行取值，而計(jì)算屬性是基于它們的依賴(lài)進(jìn)行緩存的。只在相關(guān)依賴(lài)發(fā)生改變時(shí)它們才會(huì)重新求值。也就是說(shuō)，計(jì)算屬性會(huì)直接從緩存拿值，并伴隨著值的改變而改變。而傳統(tǒng)的直接通過(guò)表達(dá)式求值的方式需要我們?cè)谀弥抵靶枰獔?zhí)行一次getter()函數(shù)

監(jiān)聽(tīng)屬性（watch）

監(jiān)聽(tīng)屬性其實(shí)質(zhì)是一次異步回調(diào)，希望讀者在想到使用監(jiān)聽(tīng)屬性之前多考慮能否采用計(jì)算屬性來(lái)取代監(jiān)聽(tīng)屬性

對(duì)比同一個(gè)功能實(shí)現(xiàn)

//計(jì)算屬性
computed: {
  fullName2: function () {
    return this.firstName + ' ' + this.lastName
  }
}
//監(jiān)聽(tīng)屬性
watch: {
   firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
  }
}

可以看到計(jì)算屬性的代碼更加簡(jiǎn)潔也更加高效，而且就實(shí)現(xiàn)效果而言，明顯計(jì)算屬性會(huì)更好一點(diǎn)

以上這篇Vue項(xiàng)目中數(shù)據(jù)的深度監(jiān)聽(tīng)或?qū)ο髮傩缘谋O(jiān)聽(tīng)實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: