Vue2.0 中 v-for里面的 “就地复用” 策略 是什么？

就地复用官方的解释 :

如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素

这句话比较难理解, 看下面这个例子:

首先输入框, 文本, 按钮是写在一个div里面

<div v-for='item in list'>
{{文本}} <input /> <button @click="将item在list中的位置下移"/>
</div>

在"就地复用"策略中, 点击按钮, 输入框不随文本一起下移, 是因为输入框没有与数据(data)绑定, 所以vuejs默认使用已经渲染的dom, 然而文本是与数据绑定的, 所以文本被重新渲染. 这种处理方式在vue或者angularjs中都是默认的列表渲染策略, 因为高效.

这种"就地复用"一般在"列表展示"的场景中不会出现问题, 所以我的建议是 : 如果你的列表元素存在与用户交互的场景(比如form表单或者重新排序等), 那么请你为 v-for指令设置key参数,key指向列表中每个元素的唯一值.

官方解释:

"就地复用"的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

演示地址 : JS Bin演示地址 : JS Bin