vue之computed和watch

南風一濺發表於2018-12-10
Vue
計算屬性 computed
偵聽器or觀察者 watch

一直以來對computed和watch一知半解，用的時候就迷迷糊糊的，今天仔細看了看文件，突然茅塞頓開，原來就是這麼簡單啊：

computed，通過別人改變自己

watch，通過自己改變別人

需要注意的是，computed會快取資料，只有在滿足以下兩個條件時才會重新計算：

1、存在依賴型資料，即存在於VUE的data等物件的實下的例項資料

2、依賴型資料發生改變

如果不滿足以上兩個條件，computed不會重新計算，只會拿快取的資料。而watch，只要呼叫他，他就會執行。

注意：computed會快取資料，所以進行開銷較大的操作時不適合用它。

非依賴型資料發生改變時，這是使用methods方法即可。

computed也可以通過自己改變別人

computed預設只有 getter ，不過在需要時也可以提供一個 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]
        }
      }
    }
複製程式碼

然後執行 vm.fullName = 'John Doe' 時，setter 會被呼叫，vm.firstName 和 vm.lastName 也會相應地被更新。

什麼時候使用

computed

1、其他依賴型資料發生改變，自身也要改變的時候

2、自身改變了，想要改變其他資料的時候，這時需要新增setter

watch

1、自身改變時改變其他資料

2、當需要在資料變化時執行非同步或開銷較大的操作時

相關文章