技術標籤：vuevue計算屬性watch監聽

座右銘：越努力越幸運，越運動越健康。
熱愛前端技術，熱愛運動的（愛笑，傻傻的）這樣一個人

文章目錄

• computed計算屬性
• • 1：用來監控自己定義的變數，該變數不在data中宣告，直接在computed裡面定義，然後就可以在頁面上進行雙向資料繫結展示出結果或者用作其他處理；
  • 2：比較適合對多個變數或者物件進行處理後返回一個結果值，也就是數多個變數中的某一個值發生了變化則我們監控的這個值也就會發生變化，舉例：購物車裡面的商品列表和總金額之間的關係，只要商品列表裡面的商品數量發生變化，或減少或增多或刪除商品，總金額都應該發生變化。這裡的這個總金額使用computed屬性來進行計算是最好的選擇
  • 3：模板中通過 {{ totalMarks }} 進行展示computed變化值
  • 4：Vue中計算屬性是基於它們的依賴進行快取的，而方法是不會基於它們的依賴進行快取的。從而使用計算屬性要比方法效能更好。計算屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算。
• watch監聽
• • 監聽某一個值，當被監聽的值發生變化時，執行對應的操作
• 倆者區別：
• • 計算屬性computed
  • watch監聽

computed計算屬性

1：用來監控自己定義的變數，該變數不在data中宣告，直接在computed裡面定義，然後就可以在頁面上進行雙向資料繫結展示出結果或者用作其他處理；

2：比較適合對多個變數或者物件進行處理後返回一個結果值，也就是數多個變數中的某一個值發生了變化則我們監控的這個值也就會發生變化，舉例：購物車裡面的商品列表和總金額之間的關係，只要商品列表裡面的商品數量發生變化，或減少或增多或刪除商品，總金額都應該發生變化。這裡的這個總金額使用computed屬性來進行計算是最好的選擇

3：模板中通過 {{ totalMarks }} 進行展示computed變化值

4：Vue中計算屬性是基於它們的依賴進行快取的，而方法是不會基於它們的依賴進行快取的。從而使用計算屬性要比方法效能更好。計算屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算。

watch監聽

監聽某一個值，當被監聽的值發生變化時，執行對應的操作

  watch:{
      num:function(newVaule,oldVaule){
        console.log(newVaule,oldVaule)
      },
      // num(newVaule,oldVaule){
      //   console.log(newVaule,oldVaule)
 

      // },
      //注意 物件的屬性用用一下的監聽
      // 'obj.id'(newVaule,oldVaule){
      //   console.log(newVaule,oldVaule)
      // }
      obj:{
        //注意：當觀察的資料為物件或陣列時，curVal和oldVal是相等的，因為這兩個形參指向的是同一個資料物件
        handler(curVal,oldVal){  //handler預設的執行函式
          console.log(curVal,oldVal)
        },
        deep:true  //物件內部的屬性監聽，也叫深度監聽
      }
  }

倆者區別：

（注意：
計算屬性computed與methods的區別
計算屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算，而methods的不會被快取，只要觸發方法就算再次觸發了）

計算屬性computed

計算結果並返回，只有當被計算的值發生改變時才會觸發
(即：計算屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算)

watch監聽

監聽某一個值，當被監聽的值發生變化時，執行對應的操作
(與computed的區別是，watch更加適用於監聽某一個值的變化並做對應的操作，比如請求後臺介面等，而computed適用於計算已有的值並返回結果)