解决vue的computed属性计算出来的数组渲染不更新的问题

问题场景

在vue项目中需要做自定义条件筛选框,自己可以配置自己的筛选框选项。采取的做法是把筛选框封装成组件,然后记录所勾选的筛选条件存到数组里面,然后通过v-for把对应的筛选框渲染到页面上。数组是通过computed属性计算出来的。

出现的问题

问题:vue项目中通过v-for渲染列表,数组数据更新后,视图没有没有同步更新。

勾选或者移除某一个筛选框,通过devtool工具看到数组中的数据是发生了改变,但是视图上更新的并不是我们想要的效果。比如删除一个筛选框,视图像按着顺序前一个,但是并没有按着正常的数组里面的值进行渲染。

问题解决

  • 第一步,在封装的子组件的created函数中打印句话,判断组件是否重新渲染
  • 例如一共选择了5个筛选框,在第一次初始化的时候是打印了5次,但是我在新增一个筛选框的时候发现只打印了一次,但是按我的方案来走的话,按道理是我一个选择了6个筛选框,应该根据数组,重新渲染6,应该初始化6次才对。
  • 观察到这个现象,我想到了之前有了解过vue中的组件复用的机制,然后顺藤摸瓜的去vue的官方文档上寻找答案。
  • 果不其然,在v-for的介绍中提到了一个“就地更新”的机制,回头看了我的代码,果然问题就出在这里,因为以前用v-for遍历的时候不存在对数组进行操作,重复渲染的问题。所以习惯性的认为用索引当做key的绑定值。
    image.png
  • 本次的问题就是出现在这里,我用了索引去当做key进行绑定,数组发生变化了,但是索引不会变的,例如我虽然更新数组第一位的数据,但是数组第一位对应的索引依然为0不会变化,那vue就认为这个组件不会改变,那他就不会再去重新渲染这个组件,而是选择了复用。这就是导致我bug的原因。

    总结

    在这解决这个问题的过程中,起初我以为问题是出在视图更新晚于数据更新,想通过nextTick解决,也想过通过set来给数组赋值。但是问题的起源是我已经确定了数据是同步更新了,视图更新了但是更新的不正确,而不是没有更新,如果没有更新的话,应该是我新增或者删除一个组件后,视图无效果,再一次操作后才有效果,没有认真分析问题的原因,就开始按着自己的认知开始解决问题,最后所有的方式都尝试了无效后才开始思考,慢慢接近正确答案。

记录问题解决的过程,如果有描述有误或者不清晰的地方,欢迎指正。

你可能感兴趣的:(解决vue的computed属性计算出来的数组渲染不更新的问题)