vue的watch监听

一、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，脑子里面要有思路。