vue中的深度监听错误总结

今天在项目遇到这样一个问题，请求回来的数据，我直接进行赋值，代码如下：

      this.hospitalList = res.data;
      this.hospitalList.map(item => {
        item.showFlag = false;
        return item;
      })
      this.hospitalList = this.hospitalList.splice(0, 15)
      console.log(this.hospitalList);
      this.showMap = true;

然后hospitalList加载到页面的时候，循环遍历之后，每一项的showFlag属性改变之后，没有进行响应，这是为什么呢？
仔细想了之后发现，hospitalList 在 this.hospitalList = res.data; 这一步之后结构就固定下来了，数组里面包含了好多对象，然后我再使用map去修改数组里面对象的值，这个时候vue是检测不到的，所以没有进行响应。具体请看vue2.x官方文档中：深入响应式原理 在vue3.0就不存在这个问题了。
同时根据打印出来的数据也能判断，一般响应式的数据，鼠标停留在上面会显示invoke property getter 翻译过来就是：调用属性的getter，说明数据已经进行了响应式监听。

对于上面的代码最终的修改是：

      this.hospitalList = data.map(item => {
        item.showFlag = false;
        return item;
      })
      // this.hospitalList = this.hospitalList.splice(0, 15)
      console.log(this.hospitalList);
      this.showMap = true;

直接在返回的数据里面增加属性，然后再进行赋值（数组也是对象，对于一个空对象直接赋值，相当于创建一个新对象，里面的属性都可以监听到）。
记录一次深度监听犯的错误，引以为戒。