问题场景

在我的项目中须要做自定义条件筛选框，本人能够配置本人的筛选框选项。采取的做法是把筛选框封装成组件，而后记录所勾选的筛选条件存到数组外面，而后通过 v -for 把对应的筛选框渲染到页面上。数组是通过 computed 属性计算出来的。

呈现的问题

勾选或者移除某一个筛选框，通过 devtool 工具看到数组中的数据是产生了扭转，然而视图上更新的并不是咱们想要的成果。比方删除一个筛选框，视图像按着程序前一个，然而并没有按着失常的数组外面的值进行渲染。

问题解决

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

• 本次的问题就是呈现在这里，我用了索引去当做 key 进行绑定，数组发生变化了，然而索引不会变的，例如我尽管更新数组第一位的数据，然而数组第一位对应的索引仍然为 0 不会变动，那 vue 就认为这个组件不会扭转，那他就不会再去从新渲染这个组件，而是抉择了复用。这就是导致我 bug 的起因。

  总结

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

记录问题解决的过程，如果有形容有误或者不清晰的中央，欢送斧正。