对这个不理解

来源:10-13 transition-group(3)

六一888

2020-02-17

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

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

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

写回答

1回答

ustbhuangyi

2020-02-17

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

0
2
ustbhuangyi
回复
六一888
因为移除的节点也是有动画的呀。
2020-02-17
共2条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4984 学习 · 1037 问题

查看课程