Vue methods,watch,computed的區別

1. computed(計算屬性)

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

　　eg:

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

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

　　注意：當頁面多次調用sum，也只會在控制台打印一次日志：'這是cpmputed實現的a+b處理'，除非改變 a 或者 b 的值。

2. methods(方法)

　　methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 實例。
　　eg:

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

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

　　注意：當頁面多次調用sum，每調一次控制台打印一次日志：'這是mthods實現的a+b處理'。

3. watch(偵聽屬性)

　　一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名、路由，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。

　　eg:

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
  }
}

　　注意：Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：watch 屬性。當你有一些數據需要隨着其它數據的變動而變動時，很容易濫用 watch。 然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回調。

完整 js 如下：

<script> export default { data () { return { a: 1, b: 2, c: 3 } }, computed: { sum: 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: { sums () { 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>