Vue 就地復用策略

官方文檔原話：

    當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用“就地更新”的策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每個元素，並且確保它們在每個索引位置正確渲染。

 

以下是某知乎大佬的解釋，筆者在這里拾人牙慧了。

  代碼的抽象

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

          

 實際效果

      

     在就地復用策略中，點擊下移，輸入框不隨文本一起移動，是因為輸入框沒有與數據data綁定，所以vue.js 默認使用已經渲染生成的dom，然而文本是與數據綁定的，所以文本被重新渲染。

 

    不難想象，就地復用模式的確是高效的，但這里，筆者對最后一句 就地復用只適用於不依賴子組件狀態或者臨時DOM狀態的列表渲染輸出，這句話，還是不怎么理解