傑森前端

computed

1. 沒有自己的屬性是藉由data的屬性計算而來
2. 底層借助Object.defineProperty的getter與setter
3. 初次讀取的時候會執行一次getter
4. 依賴的data屬性變化時候也會執行getter
5. 計算屬性要修改要使用setter來修改

watch

1. Vue中的watch默認不監聽物件裡面的屬性要開啟deep:true才行
2. Vue自身可以監測到物件裡面屬性值的改變但是watch不行

寫法

#配置項設定監聽
watch:{
	xxx:{
		handler(nV,oV){
		},
		immediate:true, 第一次就執行
		deep:true //深度監聽預設為false如果要監聽物件裡面的屬性變化就要開啟這個
	},
	//這樣也可以監聽到物件裡面的某個屬性
	'xxx.x':{
		handler(nV,oV){
		},
	}
}
#動態監聽
vm.$watch('newXXX',{
		handler(nV,oV){
		},
		immediate:true, 第一次就執行
		deep:true //深度監聽
})
#簡寫
watch:{
	xxx(nV,oV){}
}

computed vs watch

1. computed能實現的功能watch也可以實現
2. watch能實現的功能computed不一定能實現例如：一些非同步操作