Vue 中 computed、methods、watch三者的差別

computed（計算屬性）

計算屬性将被混入到 Vue 執行個體中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 執行個體。

計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。注意，如果某個依賴 (比如非響應式屬性) 在該執行個體範疇之外，則計算屬性是不會被更新的。

computed 執行個體

<p>computed={{sumab}}</p>
<p>computed={{sumab}}</p>
           

computed: {
  sumab: function () {
    console.log('這是cpmputed實作的a+b處理')
    return Number(this.a) + Number(this.b)
  }
}
           

注意：當頁面多次調用sunmab可以看到控制台隻會輸出一次日志‘這是cpmputed實作的a+b處理’

methods（方法）

methods 将被混入到 Vue 執行個體中。可以直接通過 VM 執行個體通路這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 執行個體。

methods 執行個體

<p>methods={{sumabs()}}</p>
<p>methods={{sumabs()}}</p>
           

methods: {
  sumabs () {
    console.log('這是methods實作的a+b處理')
    return Number(this.a) + Number(this.b)
  }
}
           

注意：當頁面多次調用sumabs 可以看到控制台會輸出多次日志‘這是methods實作的a+b處理’

computed(計算屬性) vs methods(方法)

我們可以将同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果确實是完全相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。計算屬性隻有在它的相關依賴發生改變時才會重新執行函數求值。這就意味着隻要 a或b 還沒有發生改變，多次通路 sumab 計算屬性會立即傳回之前的計算結果，而不必再次執行函數。 這也同樣意味着下面的計算屬性将不再更新，因為 Date.now() 不是響應式依賴： computed: { now: function () { return Date.now() } }

相比之下，每當觸發重新渲染時，調用方法将總會再次執行函數。

執行個體

<p>computed={{sumab}}</p>
<p>methods={{sumabs()}}</p>
           

computed 寫法實作

computed: {
  sumab: function () {
    console.log('這是cpmputed實作的a+b處理')
    return Number(this.a) + Number(this.b)
  }
}
           

methods 寫法實作

methods: {
  sumabs () {
    console.log('這是methods實作的a+b處理')
    return Number(this.a) + Number(this.b)
  }
}
           

總結：資料量大，需要緩存的時候用computed；每次确實需要重新加載，不需要緩存時用methods

watch（偵聽屬性）

一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 執行個體将會在執行個體化時調用 $watch()，周遊 watch 對象的每一個屬性。

watch 執行個體

watch: {
  a: function (val) {
    console.log('這是watch a 的處理')
    this.c = Number(val) + this.b
  },
  b: function (val) {
    console.log('這是watch  b  的處理')
    this.c = Number(val) + this.a
  }
}
           

computed(計算屬性) vs watch(偵聽屬性)

Vue 提供了一種更通用的方式來觀察和響應 Vue 執行個體上的資料變動：watch 屬性。當你有一些資料需要随着其它資料的變動而變動時，很容易濫用 watch。 然而，通常更好的做法是使用計算屬性而不是指令式的 watch 回調。

執行個體

watch 寫法實作

watch: {
  a: function (val) {
    console.log('這是watch a 的處理')
    this.c = Number(val) + this.b
  },
  b: function (val) {
    console.log('這是watch  b  的處理')
    this.c = Number(val) + this.a
  }
}
           

computed 寫法實作

computed: {
  c: function () {
    console.log('這是cpmputed實作的a+b處理')
    return Number(this.a) + Number(this.b)
  }
}
           

總結：watch實作的代碼是指令式的和重複的使代碼變得複雜。computed 計算屬性實作的代碼簡潔易于頁面的維護

完整js:

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        a: 1,
        b: 2,
        c: 3
      }
    },
    computed: {
      sumab: function () {
        console.log('這是cpmputed實作的a+b處理')
        return Number(this.a) + Number(this.b)
      },
      c: function () {
        console.log('這是cpmputed實作的a+b處理')
        return Number(this.a) + Number(this.b)
      }
    },
    methods: {
      sumabs () {
        console.log('這是methods實作的a+b處理')
        return Number(this.a) + Number(this.b)
      }
    },
    created () {
    },
    watch: {
      a: function (val) {
        console.log('這是watch a 的處理')
        this.c = Number(val) + this.b
      },
      b: function (val) {
        console.log('這是watch  b  的處理')
        this.c = Number(val) + this.a
      }
    }
  }
</script>