Vue的transition-group与Virtual Dom Diff算法结合应用，如何实现长尾词的动态渲染？

本文共计2373个文字，预计阅读时间需要10分钟。

开始+这次的题目看起来有点奇怪：把两个没有关联的名词放在一起，正如大家所知道的，transition-group是Vue的内置组件之一，主要用途在于列表的动画效果，但它是会跟Virtual DOM Diff算法一起工作的。

开始

这次的题目看上去好像有点奇怪：把两个没有什么关联的名词放在了一起，正如大家所知道的，transition-group就是Vue的内置组件之一主要用在列表的动画上，但是会跟Virtual Dom Diff算法有什么特别的联系吗？答案明显是有的，所以接下来就是代码分解。

缘起

主要是最近对Vue的Virtual Dom Diff算法有点模糊了，然后顺手就打开了电脑准备温故知新；但是很快就留意到代码：

// removeOnly is a special flag used only by <transition-group> // to ensure removed elements stay in correct relative positions // during leaving transitions const canMove = !removeOnly

removeOnly是什么鬼，怎么感觉以前对这个变量没啥印象的样子，再看注释：removeOnly只用在transition-group组件上，目的是为了保证移除的元素在离开的动画过程中能够保持正确的相对位置（请原谅我的渣渣翻译）；好吧，是我当时阅读源码的时候忽略了一些细节。