data() {
return {
form: {
width: 100,
height: 100,
rotate: 0,
id: ''
}
}
},
watch: {
form: {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
},
},
image.png
这个时候，form中的值发生变化的时候，监听触发了，但是新值和旧值得到的结果是相同的。
这时我们可以加了一个计算属性，在计算属性中加了一个深拷贝，我们监听计算属性的名称
computed: {
newForm() {
return JSON.parse(JSON.stringify(this.form))
}
},
watch: {
'newForm': {
deep: true,
handler(newVal, oldVla) {
console.log(newVal, oldVla)
},
},
},
image.png
这时，form中的值再发生变化的时候，新值和旧值就完全正确了
