JZTXT

解决vue中watch监听对象变化获取不到旧数据的问题

发布时间 2023-09-13 11:22:06作者: 天官赐福·

解决vue中watch监听对象变化获取不到旧数据的问题

1.问题代码

  watch: {
    pageInfo: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
    }
  }

结果：打印出来newVal和oldVal输出内容一样
image

console.log(newVal === oldVal) //true

发现这俩对象一样，它们两指向的是同一个引用，这说明 Watch 只是侦听到它改变了，并没有把之前的老值给缓存下来，引用类型直接指向了引用地址。

2.解决方法

  computed: {
    deepPageInfo() {
      return JSON.parse(JSON.stringify(this.pageInfo));
    }
  },
  watch: {
    deepPageInfo: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      deep: true
    }
  },

使用computed计算属性对pageInfo进行深拷贝，然后监听deepPageInfo的变化。这样就能获取到旧数据的值。
image