位置: IT常识 - 正文
watch监听不到 props变量的变化(watch监听不到props数据改变)
发布时间：2024-01-16目录
一、问题
二、解决方法
三、总结
一、问题
推荐整理分享watch监听不到 props变量的变化(watch监听不到props数据改变)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:watch监听不到 store数据变化,watch监听不到对象变化,watch监听不到props数据改变,watch监听不到props传来数据的变化,watch监听不到对象数组的变化,watch监听不到对象变化,watch监听不到props传来数据的变化,watch监听不到props,内容如对您有帮助，希望把文章链接给更多的朋友！
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.解决之前，我也看了其他的博客，都没有解决我的问题，所以特此记录一下。
/*
希望对你有帮助！
如有错误，欢迎指正，非常感谢！
*/
上一篇：医学图像处理的SCI期刊和顶会(医学图像处理的步骤一是设计)
下一篇：node npm 下载，安装，使用 全网最全教程(npm安装node指定版本)
