vue 的computed 和 watch 兩者的區別

computed是計算屬性，依賴其他屬性計算，並且computed的值有緩存，只有當計算值發生變化才會返回內容。

• computed 用來監控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁面上進行雙向數據綁定展示出結果或者用作其他處理。舉例：購物車里面的商品列表和總金額之間的關系，只要商品列表里面的商品數量發生變化，或減少或增多或刪除商品，總金額都應該發生變化。這里的這個總金額使用computed屬性來進行計算是最好的選擇
• 比如：

比較適合對多個變量或者對象進行處理后返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化。

 

watch監聽到值的變化就會執行回調，在回調中可以進行一些邏輯操作。

• watch主要用於監控vue實例的變化，它監控的變量當然必須在data里面聲明才可以，它可以監控一個變量，也可以是一個對象，但是我們不能類似這樣監控，比如：

watch:{
goodsList.price(newVal,oldVal){
    //監控商品列表中是商品價格
}
}

這樣會報錯，只能監控整個對象或單個變量。如：

data(){
　　　　　return {
　　　　　　　example0:"",
　　　　　　　example1:"",
　　　　　　　example2:{
 　　　　　　　　inner0:1, 　　　　　　　　　
              innner1:2 　　　　　　　　　
            }
　　　　　}
　　　　},
watch:{
　example0(newVal,oldVal){//監控單個變量
           ……
   }，
example2(newVal,oldVal){//監控對象
           ……
   }，
}

• watch一般用於監控路由、input輸入框的值特殊處理等等，它比較適合的場景是一個數據影響多個數據

一般來說：

需要依賴別的屬性來動態獲得值的時候使用computed；

監聽到值的變化需要進行一些業務邏輯的時候使用wtch；

 另外 computed 和 watch 還都支持對象的寫法

 

vm.$watch('obj', {
    // 深度遍歷
    deep: true,
    // 立即觸發
    immediate: true,
    // 執行的函數
    handler: function(val, oldVal) {}
})
var vm = new Vue({
  data: { a: 1 },
  computed: {
    aPlus: {
      // this.aPlus 時觸發
      get: function () {
        return this.a + 1
      },
      // this.aPlus = 1 時觸發
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})