javascript - vue中的computed和watch到底有什麼不同？

Question

如題，在vue.js官方文件中看到computed和watch取得全名的一個例子：

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

菜鳥表示不太懂他們之間的區別，難道watch就不可以像computed那樣來獲取嗎？

Answer 1

用computed程式碼寫的少，沒什麼主要差別

Answer 2

我覺得還是有差別的，而且兩種應用的情形應該要區分。

計算屬性是計算屬性，觀察是觀察。

計算屬性顧名思義就是透過其他變數計算得來的另一個屬性，fullName在它所依賴firstName，lastName這兩個變數變化時重新計算自己的值。

另外，計算屬性具有快取。計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這意味著只要 lastName和firstName都沒有改變，多次存取 fullName計算屬性會立即傳回先前的計算結果，而不必再執行函數。

而觀察watch是觀察一個特定的值，當該值變化時執行特定的函數。例如分頁元件中，我們可以偵測頁碼執行取得資料的函數。

可以再詳細的檢視一下文件：https://cn.vuejs.org/v2/guide...

Answer 3

更具可讀性，以及通常來說更少的程式碼。

Answer 4

簡單來看computed是基於快取進行的，watch等於一個函數。個人覺得會用就好了，具體區別移駕具體區別

覺得還是計算屬性用的能廣泛一些吧