監(jiān)聽(tīng)屬性、方法、偵聽(tīng)屬性的區(qū)別

計(jì)算屬性(computed)

  1. 計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的,如果依賴沒(méi)變則不會(huì)重新執(zhí)行,而 是直接返回緩存的內(nèi)容
  2. 計(jì)算屬性默認(rèn)只有 getter,不過(guò)在需要時(shí)你也可以提供一個(gè) setter
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計(jì)算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實(shí)例
      return this.message.split('').reverse().join('')
    }
  }
})

reversedMessage 中依賴message屬性,message屬性變化時(shí)reversedMessage會(huì)重新執(zhí)行,否則會(huì)返回之前的緩存內(nèi)容

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

現(xiàn)在再運(yùn)行 vm.fullName = 'John Doe' 時(shí),setter 會(huì)被調(diào)用,vm.firstName 和 vm.lastName 也會(huì)相應(yīng)地被更新。

方法 (method)

方法每次調(diào)用都會(huì)重新執(zhí)行,不會(huì)有緩存

偵聽(tīng)屬性(watch)

偵聽(tīng)屬性在于可以自行監(jiān)聽(tīng)單個(gè)或多個(gè)屬性,在這些屬性值發(fā)生變化時(shí)執(zhí)行對(duì)應(yīng)內(nèi)容

例:

data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 發(fā)生改變,這個(gè)函數(shù)就會(huì)運(yùn)行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容