vue 深度监听watch数组对象，可以执行watch方法，但是得到的新旧值相同的问题解决方案

@codeDo

于 2019-08-20 13:20:41 发布

阅读量8.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_33505829/article/details/99837577

vue 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了在Vue.js框架中如何有效利用watch和computed属性来解决数据监听问题，尤其是在处理复杂数据结构变化时的高效解决方案。通过具体实例，展示了如何避免watch中newVal与oldVal值相同的问题，以及如何通过computed属性破坏原型链，实现数据的正确监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说一下，watch的基本用法：

watch: {
    indexList: {
      handler(newVal, oldVal) {
        if (this.indexList.length !== 0) {
          this.rightBtnText = '确定';
        }
      },
      deep: true
    }
}

// 通过 watch 监听indexList的变化，有变化就执行里面的方法，但是输出的的newVal, oldVal是一样的，很奇怪。

然后就百度，各种找解决方法，

解决办法如下：

加个compute用函数再返回一下这个值, 再用JSON.parse() 这个方法转一下，目的是破坏原型链：

computed:{
  listData(){
    return JSON.parse(this.list);
  }
},
watch: {
    listData: {
      handler(newVal, oldVal) {
        if (this.indexList.length !== 0) {
          this.rightBtnText = '确定';
        }
      },
      deep: true
    }
}

这样输出的值就不同了