vue 就地复用的适用情况

Question

默认模式(就地更新)是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。
不太理解"不依赖于子组件状态或临时DOM状态变化"，感谢解释一下

Answer 1

引自免费微信小程序：皆我百晓生

在Vue中，就地复用（也称为“就地更新”）是Vue列表渲染优化的一项策略。当数据发生变化时，Vue会尽可能地复用已有DOM元素来更新视图，而不是每次数据变动都重新创建整个列表的DOM元素。这可以显著提高大型列表渲染时的性能。

对于“不依赖于子组件状态或临时DOM状态变化”的情况，这意味着：

1. 不依赖子组件状态：如果列表项是一个组件实例，并且这个子组件的状态会影响到它的渲染输出（例如，它有自己的内部状态或props），那么就地复用可能会导致问题。因为Vue在默认情况下不会保留和恢复子组件的状态，所以如果你的列表项包含具有状态的子组件，且这些状态需要随着列表项的移动而保持不变，则不应采用就地复用。

   例如：

   <ul>
     <li v-for="item in items" :key="item.id">
       <CustomComponent :item="item"/>
     </li>
   </ul>
   

   在此例中，若CustomComponent有自身的内部状态（如计数器、输入框的值等），并且这些状态应该与item关联，在列表重新排序时应当保持一致，那么就地复用可能不合适。

2. 不依赖临时DOM状态：这里指的是列表项内的DOM元素上可能存在一些临时状态，比如用户交互产生的焦点、选中状态，或者通过JavaScript手动修改了DOM元素的属性（非响应式属性）。在这种情况下，Vue在复用DOM节点时，无法自动处理这些临时状态，可能导致用户体验上的异常。

   比如：

   <ul>
     <li v-for="item in items" :key="item.id">
       <input type="text" :value="item.value" @input="updateValue($event, item.id)">
     </li>
   </ul>
   

   如果用户正在编辑某个列表项中的输入框，但Vue因数据变更触发了列表重排并使用了就地复用策略，那么当前获得焦点的输入框可能被错误地复用于另一个列表项，丢失原有的输入焦点和临时输入内容。

总结来说，Vue的就地复用适用于那些列表项纯粹基于外部数据驱动渲染，并且不涉及任何额外状态的情况。对于复杂场景，特别是子组件状态或临时DOM状态有所依赖时，应确保为每个列表项提供一个稳定的、唯一的key属性，以便Vue能够准确判断何时进行复用以及何时重建DOM节点。