watch监听form，新值和旧值相同问题解决

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中的值再发生变化的时候，新值和旧值就完全正确了