一、bug描述
1、有一个变量patientList = [{b : 1 }],它在子组件room.vue中,而我们要在patientList.vue父组件调用。以下是代码的执行顺序:
在此页面先渲染完room组件,然后再从后端拿到数据,将数据赋值给patientList[index].item,(注意:在这之前是没有item这个属性的),重新渲染room组件的数据,结果数据没渲染出来。本以为这样就可以正常渲染的拿到的数据的,然而并不是????
二、查找原因
1、在room组件watch监听patientList.item,然而并没有监听到变换,就是它的回调函数没执行,咦,为什么没有执行呢?已经从空数组变为有数据的数组呢吗????然而我一直在纠结,然后我去询问了我师傅。
2、经过我师傅的一系列操作,终于找到了原因为什么不显示数据和监听不执行回调函数。是因为patientList.item这属性是在拿到数据后才有的,所以room组件的watch是监听不到的,并且(我猜的)vue的机制可能监听不到这属性的变化就不重新渲染页面。
三、改bug
1、在拿数据之前,先给它一个赋值一个 [] ,这样就能监听到了,并且可以重新渲染了。
四、总结
1、watch监听的变量要在数据变化之前就要存在。
2、对问题要追根问底。例如上述说watch监听不到变化,那么要深究为什么监听不到,而不是弃之不理
3、要定下心来找bug,脑子里面要有思路。