问题场景在vue项目中，需要做一个自定义的条件过滤框，可以配置自己的过滤框选项。采取的做法是将过滤框封装成一个组件，然后记录选择的过滤条件并存入数组，然后通过v-for将对应的过滤框渲染到页面。数组是通过computed属性计算的。出现的问题问题：在vue项目中，通过v-for渲染列表。数组数据更新后，视图不会同步更新。勾选或者去掉某个过滤框，使用devtool工具可以看到数组中的数据发生了变化，但是视图上的更新并不是我们想要的。比如你删除了一个filterbox，viewimage会按顺序是前一张，但是不会按照normal数组中的值进行渲染。解决问题的第一步是在封装的子组件的created函数中打印一句话判断组件是否重新渲染。比如一共选择了5个过滤框，第一次初始化的时候打印了5次，但是我在新添加过滤框的时候发现只打印了一次，但是如果按照我的plan，按道理我选了6个filterboxes，应该按照数组重新渲染6个，应该初始化6次。观察到这个现象，以为自己之前了解过vue中组件复用的机制，于是去vue的官方文档中寻找答案。果然在v-for的介绍中提到了一种“就地更新”的机制。回头看我的代码，问题真的出在这里，因为之前用v-for遍历的时候并没有对数组进行操作。重复渲染的问题。所以习惯上使用索引作为键的绑定值。这次的问题就在这里。我使用索引作为绑定的键。数组变了，但索引不会变。比如我虽然更新了数组的第一个数据，但是对应的索引还是0，不会变，那么Vue认为这个组件不会变，那么他就不会重新渲染这个组件，而是选择重用。这就是导致我的错误的原因。总结一下，在解决这个问题的过程中，一开始以为是视图更新晚于数据更新的问题。想通过nextTick解决，也想过通过set给数组赋值。但是问题的根源是我确认数据是同步更新的，视图更新了但是更新不正确，不是没有更新，如果没有更新，应该是我添加或者删除了一个组件之后，该视图没有效果，然后它只在一次操作后起作用。没有认真分析问题的原因，就开始按照自己的认知去解决问题。最后，在尝试了所有方法都无济于事后，我开始思考，慢慢接近正确答案。记录解决问题的过程。如果有任何错误或描述不清楚的地方，请指正。
