015、計算屬性(computed)

一、計算屬性

設計的初衷是爲了進行簡單的運算，以此來減少模板中邏輯的維護。當模板中用到了運算邏輯，建議使用運算屬性（computed來代替methods中的方法）。

2、基本寫法

HTML:
<div>{{this.num1}} + {{this.num2}} = {{endNum}}</div>
JS:
data () {
    return {
        num1: 2,
        num2: 4,
    }
},
computed: {
// 此爲計算屬性的getter
    endNum: function () {
        return this.num1 + this.num2
    }
}
/*
在計算屬性中，this指向該組件實例；
若使用箭頭函數時，所傳參數爲當前組件實例；寫法如下：
    endNum: vm => {
      console.log(vm.id)// 即vm指向vue組件實例
    }
*/

3、計算屬性和方法的異同

兩者都可以實現相同的效果。
3.1、計算屬性的結果可以被緩存，除非他的依賴發生變化時纔會進行重新計算。即計算屬性不是響應式的。
3.2、methods中的方法，只要頁面被重新渲染調用方法時就會被執行。

溫馨提示：掃碼可以提問、交流。本人有各個行業的小程序前端代碼，如有需要也可以掃碼留言哦。