对这个不理解

Question

电子文档内容：
另外，由于虚拟 DOM 的子元素更新算法是不稳定的，它不能保证被移除元素的相对位置，所以我们强制 组件更新子节点通过 2 个步骤：第一步我们移除需要移除的 vnode，同时触发它们的 leaving 过渡；第二步我们需要把插入和移动的节点达到它们的最终态，同时还要保证移除的节点保留在应该的位置，而这个是通过 beforeMount 钩子函数来实现的：

关于以上我大致的理解是 updateChildren 函数会移动节点，所以为了获取到被删除节点的位置，我们进行了两次 patch，第一次是只作删除的操作，不移动节点，第二次是给 patch 传入所有应该保留的节点，然后让所有的节点到最终态。

但是不理解移除的节点保留在应该的位置是什么意思？其实我对上面为什么进行两次 patch 都没有想清楚。

Answer 1

ustbhuangyi 2020-02-17 11:22:53

因为 transition-group 的组件的目是要给列表中的节点做动画，而 DOM diff 算法的不稳定，很有可能会导致节点移动，那么这样动画就错乱了，但是 patch 函数的第四个参数 removeOnly 为 true 的话，这些节点就不会移动了，还是 DOM 原来的位置，这样做动画的时候就可以保证 DOM 的顺序，不会错乱了。

• 提问者 六一888 #1

  这个基本是理解的，因为 Vue 使用了 FLIP 动画，需要知道最初和最终的位置，我不理解的是，“同时还要保证移除的节点保留在应该的位置”，节点都被移除了，干嘛要保留在应该的位置？

• ustbhuangyi 回复 提问者 六一888 #2

  因为移除的节点也是有动画的呀。