VUE中computed和watch的使用

VUE中computed和watch的使用

1.computed

computed用來監控自己定義的變數，該變數不在data裡面宣告，直接在computed裡面定義，然後就可以在頁面上進行雙向資料繫結展示出結果或者用作其他處理；
computed比較適合對多個變數或者物件進行處理後返回一個結果值，也就是數多個變數中的某一個值發生了變化則我們監控的這個值也就會發生變化，舉例：購物車裡面的商品列表和總金額之間的關係，只要商品列表裡面的商品數量發生變化，或減少或增多或刪除商品，總金額都應該發生變化。這裡的這個總金額使用computed屬性來進行計算是最好的選擇
computed根據被依賴物件的變化er變化

computed: {
			fullName:function(){
				debugger
				return this.firstName + '  ' + this.lastName;
			}
		},

當firstName或者lastName變化的時候，會觸發fullName的變化

2.watch

watch主要用於監控vue例項的變化，它監控的變數當然必須在data裡面宣告才可以，它可以監控一個變數，也可以是一個物件，但是我們不能類似這樣監控

watch:{
age(newValue, oldValue){
debugger
console.log(‘當前年齡：’ + newValue)
}
}

當age的值發生變化的時候會觸發watch
另外watch涉及到立即執行immediate:true，物件深度監聽deep屬性