computed 的英文意思是計算，那麼顧名思義，vue中的computed也與計算有關，他是專門用來處理複雜表示式的，在vue中，不建議在模板語法中寫複雜的表示式，如：x+y+(z-1) 這種，所以vue建了一個computed用來處理這類表示式，使用方法其實也不難，在computed裡面建一個函式並寫表示式，然後在想要引用的地方將之當成data裡的值引用即可，例如想要在模板語法裡面用，只需要寫函式名即可，並且不用加括號，具體例子如下：

data中定義三個值：

data(){
    return{
        num1: 10,
        num2: 20,
        nums: 5
    }
},

然後在computed中寫一條表示式：

computed:{ //計算函式，複雜的計算都應該放在這裡，儘量不要直接在模板語法裡面計算，在此處計算的值是會動態變的，即計算的數中有一個值變了，最終結果也會跟著變，類似於封裝的計算函式
    addNum:function(){ //addnum可以直接在模板語法裡面用，相當於data內的值
        return Number(this.nums) + Number(this.num1) + Number(this.num2);
    }
},

之後在模板語法中應用

<div>{{addNum}}</div> //addNum即為定義的表示式

在工作中寫了一個購物車，當用戶點選商品數量按鈕（增加或者減少）的時候，就會自動計算出總價的變化。
總價是使用computed計算出來的
總價在在子元件中計算的，只能通過this.$emit(‘自定義事件’)的方式將子元件的總價資料傳遞給父元件
需要在計算總價的時候觸發$emit() 或者 監聽總價資料變化的時候觸發 $emit事件

watch監聽compoted
    computed: {
        // 根據單價和數量計算出總價
        total: function () {
			var totalPrice = this.goodsNum * this.price;
			// 計算總價的時候向父元件傳遞資料
			// this.$emit('totalNumChange', totalPrice);
            return totalPrice;
        }
    },
    watch: {
		// 監聽computed中的屬性
        total: function (newValue, oldValue) {
            this.$emit('totalNumChange', newValue)
        },
    }

watch