watch的常規用法:
watch:{
tempData: function (value, oldValue) {
console.log(value, oldValue)
}
}
但是如果需要監聽的數據是對象、內嵌多層的對象后,需要用到watch中的deep屬性。類似於下面這種對象內嵌的對象:
data(){ return { dataList: [ { name: "里斯", age: 18, sex: "男" }, { name: "阿里路亞", age: 16, sex: "女" } ] } }
如果tableData內部屬性發生了變化,通過watch就會打印出newValue,oldValue,但是他們打印出來的結果都是一樣的。因為數據同源,雖然可以監聽到數據發生了變化,但是要比較數據差異就不行了。如果想要得到差異內容,可以結合計算屬性、序列化、反序列化生成新的對象,來避免此問題 。代碼如下;
computed:{ dataListNew(){ return JSON.parse(JSON.stringify(this.dataList)); } }, watch:{ dataListNew: { handler: function (newValue, oldValue) { console.log(newValue, oldValue); }, deep: true } }