vue中的深度监听错误总结

发布时间:2024-06-17 18:01

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

      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;

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号