vue深度监听时有时会出现新旧值相同的现象——原因及解析

什么时候 watcher 会更新

1，数组或对象指针变化时会触发视图的重新渲染。

2，数组使用vue变异方法时，因为vue对变异方法做了包装所以也能触发视图变化。

3，使用vue.$set改变其属性也能触发视图渲染。

当深度监听对象/数据变化有时候会出现新旧值相同的原因

原因在官方文档上有写明：

注意：在变异 (不是替换 例如 $set 等) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

1，可以得出以下猜测，watch监听的是数组或者对象的变动，非深度监听，无法监听属性变化，而深度监听时，数组或对象的任何变动都会导致指针的变化，变异时除外

2，什么是对象和数组的变异：即Object.difineporperty()无法监听到的数据变化（watch同样依赖于Object.difineporperty());

解决方法

vue watch 监听对象新旧值一样的处理办法

思路：

拷贝一份数据的副本，只有在数据更新的时候在更新这个副本，watch 这个副本时候变化，将能判定数据是否有变化。

实现：

data(){
    return {
      obj: {
        name: 'xxx',
        age: 18
      }
    }
  },
  computed: {
    // 拷贝一份副本
    copyObj() {
      return JSON.parse(JSON.stringify(this.obj))
    }
  },
  watch: {
    copyObj: {
      // 深度监听副本数据
      deep: true,
      handler(newVal, oldVal){
        // 前后数据不一样在做处理
        if (!newVal || !oldVal || JSON.stringify(newVal) === JSON.stringify(oldVal)) return
        // 做处理....
        // 最新的的obj取值为 this.obj
      }
    }
  }

参考文档

数组变异方法和替换数组  blog.csdn.net/xie_qi_chao…

Vue源码解析之数组变异  www.cnblogs.com/karthuslori…