Vue的computed和watch的使用和區別

一、computed：

　　模板內表達式非常便利，可用於簡單計算，當模板內放入太多的邏輯時，模板會過重且難以維護；可以使用computed替代

　　計算屬性是基於它們的響應式依賴進行緩存的，當依賴的響應式數據發生改變時，計算屬性才會改變；

　　如果時非響應式（未在data中聲明）數據，計算屬性是不會發生改變的；

　　計算屬性將被混入到vue實例中，所有的getter和setter的this上下文自動綁定到vue實例中

// 計算屬性 VS 方法
// html
<div>{{ msg }}</div>  // 計算屬性
<div>{{ res() }}</div>  // 方法
// js
const vm = new Vue({
   el: '#app',
   data: {
       name: 'zs' 
    }，
    // 計算屬性
    computed：{
       msg: {
           get() : {
               return this.name 
           },
           set(val):  {
               // val 是修改msg時觸發並賦值的最新值
           }
       } 
    },
    //  方法
    method: {
      res(): {
         return this.name   
　　　　　　//  方法和計算屬性效果一樣，不同的是計算屬性有緩存，方法是每次觸發都要進行一次調用，計算屬性是只有響應式依賴改變了才會觸發
      } 
    } 
})

二、watch 偵聽器

　　相對於偵聽器，大多數情況下使用computed，但有時也需要一個自定義的偵聽器watch，場景： 當數據在數據變化時，執行非同步或者開銷比較大的操作時，使用偵聽器

const vm = new Vue({
         el: '#app',
         data: {
            question: 'old-Q'
         },
         watch: {
           // 如果question發生改變，則這個函數就會觸發
            question: function(newQuestion, oldQuestion){
                 // newQuestion是question改變後的新值
                // oldQuestion是question改變之前的值
            }
         }
}) 
// watch是偵聽一個參數，當這個參數發生變化時影響其他數據的變化，並且可以獲得該參數的新值和舊值進行相應的計算

 官方文檔： https://cn.vuejs.org/v2/guide/computed.html