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

问题场景

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

出现的问题

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

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

问题解决

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

• 本次的问题就是出现在这里，我用了索引去当做key进行绑定，数组发生变化了，但是索引不会变的，例如我虽然更新数组第一位的数据，但是数组第一位对应的索引依然为0不会变化，那vue就认为这个组件不会改变，那他就不会再去重新渲染这个组件，而是选择了复用。这就是导致我bug的原因。

  总结

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

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