目录

一   
    
    
    、问题

二


     


     


     


、解决方法

三 




 




 




、总结

一   

   

   

   、问题

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.解决之前   



     



     



     ，我也看了其他的博客

















，都没有解决我的问题    
    
    
，所以特此记录一下  


  


  


  。

/*

希望对你有帮助！

如有错误    


     


     


    ，欢迎指正




 




 




 


，非常感谢！

*/