Vue 就地复用策略

官方文档原话：

    当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

 

以下是某知乎大佬的解释，笔者在这里拾人牙慧了。

  代码的抽象

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

          

 实际效果

      

     在就地复用策略中，点击下移，输入框不随文本一起移动，是因为输入框没有与数据data绑定，所以vue.js 默认使用已经渲染生成的dom，然而文本是与数据绑定的，所以文本被重新渲染。

 

    不难想象，就地复用模式的确是高效的，但这里，笔者对最后一句 就地复用只适用于不依赖子组件状态或者临时DOM状态的列表渲染输出，这句话，还是不怎么理解