最近在写一个功能,使用v-for循环渲染子组件:代码如下:
当datas的数据发生改变时,按理子组件展现的数据也应该重新渲染,不过在使用的时候并没有达到这样的效果,但是将循环渲染的子组件改成html标签的话数据是会重新渲染的,经查阅发现当 Vue 正在更新使用v-for
渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染,这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。相关文献:/v2/guide/list.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81
知道原因后在v-for的同时加上:key属性就解决了此问题。