目录

一   
    
    
    
、问题

二


     


     


     


    、解决方法

三 




 




 




 


、总结

一   

   

   

   

、问题

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



     



     



     



，我也看了其他的博客


















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


  


  


  


。

/*

希望对你有帮助！

如有错误    


     


     


     


，欢迎指正




 




 




 




，非常感谢！

*/