一、问题

1.父组件向子组件传参变量 detailData:{tableData:devicelist}。在父组件中detailData是响应式的。

在第一层子组件中接收detailData,并且通过:detailData="detailData.tableData"传递给第二层子组件, 在第二层子组件中使用如下代码监听deailData的变化，用watch就是监听不到detailData的变化。

    watch(
      () => props.detailData,
      (newval,oldval) => {
        //监听到 detailData的变化，我需要执行一些函数
         console.log("watch detailData")
      }
    );

二、解决方法

1.检查了监听的代码，正确的呀，没有问题

2.使用devtools插件检查，看到子组件中的detailData确实是发生了变化的呀，怎么我就是监听不到呀。很是离谱。、

3.是不是 detailData不是响应式的呢？也不是呀，使用 isReactive(detailData)，检查了是响应式的呀。

4.到底是为什么呀，我真的没有见过这么离谱的事情，在第一层子组件中都监听不到 detailData的变化。尝试在父组件中监听 detailData的变化，结果竟然除了第一次变化，之后的变化的监听不到——离奇呀，devtools告诉我子组件的值都变了，只是没有渲染上去;父组件的监听却告诉我detailData的值压根就没有变化。

5.看到给detailData赋值的地方，于是打印了一下给detailData赋的值，但是也只能打印第一次赋值的情况，后续赋值也打印不出来呀。

          console.log("item",isRef(item),item,isProxy(item))
          Object.assign(detailData, { tableData: item });

6.最后的最后：我要求detailData变化，就是要求上面代码中的 item（deviceList)一直变化。竟然发现有一处写了如下一段代码，直接给devicelist赋值，devicelist不就是会失去响应式吗？可是为啥 isProxy()判断竟然是 true?

没细想把这段直接给响应式数据 deviceList赋值的代码注释了，竟然好了。。。。。。。

      deviceList = deviceList.map((element) => {
        if (!element.isWarning) {
          element.isWarning = 0;
        }
        if (!element.level) {
          element.level = 0;
        }
        if (!element.remainTime || element.remainTime === '- -') {
          element.tempRemainTime = Infinity;
        } else {
          element.tempRemainTime = element.remainTime;
        }
        return element;
      });

三、总结

1.也是绝了，问题倒是解决了，是和响应式有关系，但是又不是完全是因为响应式。因为isProxy()---判断数据是否是 reactive或 ref 数据类型，判断确实是 true呀。真的是自相矛盾，所以我真的也是很迷惑。如有大佬知道原因，欢迎评论区指教！

2.上面的直接原因表明当你在setup中希望一个reactive数据是响应式的,绝对不可以用 = 直接给数据赋值。上面注释的代码，我也改成for循环了，就没有问题了。

3.watch监听不到，你可以看看你希望变化的数据是否存在被直接用 = 赋值的情况

4.解决之前，我也看了其他的博客，都没有解决我的问题，所以特此记录一下。

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

标签 AT, PS, watch

watch监听不到 props变量的变化

一、问题

二、解决方法

三、总结