vue深究第一彈：computed與watch的異同

這是你的玩具車嗎發表於2017-12-31
Vue

最近在開發vue的過程中，不斷用到了計算屬性（computed）和觀察者(watch)，從邏輯上感覺它們很相似，但是嘗試混用它們的時候，又出現了一些問題，那麼它們到底有什麼異同呢？

1. computed VS data
問計算屬性與觀察者異同這個問題之前，首先要明確為啥會有計算屬性，即computed vs data。在vue中，資料有時有被處理一下再展示出來的需求，例如：

var vm = new Vue({
  el: `#example`,
  data: {
    message: `Hello`,
    name: `tomczhang`
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 例項
      return this.message.split(``).reverse().join(``)
    },
    getWelcome: function () {
      return this.message + ` ` + this.name
    }
  }
})

不管是reversedMessage還是getWelcome方法，單純寫在data中都顯得很不優雅，所以，建立一個computed動態的去處理它們是很有必要的。

2. watch VS data
既然vue中資料和view是雙向繫結的，那當使用者輸入文字的時候，vue就能監聽到檢視進行了變動，並將變動的資料傳遞給我們（具體的變動原理見此）。觀察者就是系統監聽到檢視變動後呼叫的方法，引數分別是老的值和新的值。我們利用watch就可以改變data值。例如：

var vm = new Vue({
  el: `#demo`,
  watch: {
    userInput: function (oldValue, newValue) {
      this.message = newValue;
    }
  }
})

當然我們針對例子1中的程式碼也可以用觀察者來解決，這也是我寫這篇文章的主因，像這樣：

var vm = new Vue({
  el: `#example`,
  data: {
    message: `Hello`,
    name: `tomczhang`,
    welcome: ``
  },
  watch: {
    welcome: function () {
      this.welcome = this.message + ` ` + this.name；
    }
  }
})

3. computed vs watch
BB了那麼多，馬上進入我們的正題。

相同： computed和watch都起到監聽/依賴一個資料，並進行處理的作用
異同：它們其實都是vue對監聽器的實現，只不過computed主要用於對同步資料的簡單處理，watch則主要用於資料輸入時非同步操作或者開銷較大的情況。能用computed的時候優先用computed，避免了多個資料影響其中某個資料時多次呼叫watch的尷尬情況。對於檢視層的改變則優先使用watch。

例如這樣：

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
    }
  }
})

相應的computed版本

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

參考：
1）計算屬性和觀察者：https://cn.vuejs.org/v2/guide…

相關文章