vue如何使用computed代替watch

這篇文章將為大家詳細(xì)講解有關(guān)vue如何使用computed代替watch，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

使用 computed 代替 watch

很多時候頁面會出現(xiàn) watch 的濫用而導(dǎo)致一系列問題的產(chǎn)生，而通常更好的辦法是使用 computed 屬性，首先需要區(qū)別它們有什么區(qū)別：

• watch：當(dāng)監(jiān)測的屬性變化時會自動執(zhí)行對應(yīng)的回調(diào)函數(shù)

• computed：計算的屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值

其實(shí)它們在功能上還是有所區(qū)別的，但是有時候可以實(shí)現(xiàn)同樣的效果，而 computed 會更勝一籌，比如：

<template>
 <div>
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <span>{{ fullName }}</span>
  <span>{{ fullName2 }}</span>
 </div>
</template>

<script>
export default {
 data() {
  reurn {
   firstName: '',
   lastName: '',
   fullName2: ''
  }
 },
 
 // 使用 computed
 computed: {
  fullName() {
   return this.firstName + ' ' + this.lastName
  }
 },
 
 // 使用 watch
 watch: {
  firstName: function(newVal, oldVal) {
   this.fullName2 = newVal + ' ' + this.lastName;
  },
  lastName: function(newVal, oldVal) {
   this.fullName2 = this.firstName + ' ' + newVal;
  },
 }
}
</script>

上方我們通過對比可以看到，在處理多數(shù)據(jù)聯(lián)動的情況下，使用 computed 會更加合理一點(diǎn)。

computed 監(jiān)測的是依賴值，依賴值不變的情況下其會直接讀取緩存進(jìn)行復(fù)用，變化的情況下才會重新計算；而 watch 監(jiān)測的是屬性值， 只要屬性值發(fā)生變化，其都會觸發(fā)執(zhí)行回調(diào)函數(shù)來執(zhí)行一系列操作。

關(guān)于“vue如何使用computed代替watch”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。