Vue 計算屬性與方法、偵聽器的區別

計算屬性 vs 方法

<p>Computed reversed message: "{{ reversedMessage }}"</p> //計算屬性
<p>Reversed message: "{{ reversedMessage() }}"</p>        //方法

computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
},
// 方法
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

 

計算屬性 vs 偵聽屬性

雖然計算屬性在大多數情況下更合適。Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

watch: {
    // 如果 `question` 發生改變，這個函數就會運行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
}

watch是偵聽一個參數，當這個參數發生變化時影響其他數據的變化。並且可以獲得該參數的新值和舊值進行相應的計算。通過以上敘述我們可以得知：

watch適合處理的場景是，偵聽一個數的變化，當該數據變化，來處理其他與之相關數據的變化（該數據影響別的多個數據）

computed適合處理的場景是，獲得一個值或者結果，該結果受其他的依賴的影響。（一個數據受多個數據影響）

 

計算屬性的setter

// ...
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]
    }
  }
}