vue.js - vue 可以让相同key的节点只移动位置不重新渲染吗？

Question

代码复现

我的业务代码中 v-for 创建多个 iframe ，只是删除某一个便会更新后方所有节点，很不好，如何避免呢？
可以让相同key的节点只移动位置不重新渲染吗？

Answer 1

可以用 v-once 指令。

---

额。。
但不知道为什么对 iframe 没用。

  <div v-for="item in videoList" :key="item.key" :id="item.key">     <fullscreen v-once>        <iframe ...></iframe>    </fullscreen> </div>

Answer 2

是的，Vue 可以通过使用 key 属性来跟踪每个节点的身份，从而优化重新渲染的过程。当 Vue 检测到数据变化并需要重新渲染列表时，它会根据 key 属性的值来判断哪些节点是新添加的，哪些节点是移动的，哪些节点是删除的。

在 Vue 中，当列表的项顺序发生变化时，Vue 会尝试最小化 DOM 操作以提高性能。它会根据 key 属性的值来识别节点，并尝试复用和重新排序现有的元素，而不是重新创建和插入新的元素。

然而，要注意的是，Vue 并不能完全保证相同 key 的节点只移动位置而不重新渲染。在某些情况下，Vue 可能仍然需要更新节点的属性或子节点。这取决于节点的具体内容和 Vue 的虚拟 DOM 对比算法。

对于你的代码复现链接，由于我无法直接访问外部链接，因此无法直接查看代码并进行具体的分析。但是，如果你确保每个列表项都有一个唯一且稳定的 key 值，那么 Vue 应该能够优化重新渲染的过程，并尝试只移动位置而不重新渲染相同的节点。

总之，Vue 确实可以通过使用 key 属性来优化列表的重新渲染过程，并尝试复用和重新排序现有的元素。但是，具体的行为可能受到节点内容和 Vue 的虚拟 DOM 对比算法的影响。