transition组件搭配keepAlive组件使用时，会额外删除keepAlive子组件，导致渲染内容丢失

[enjoy-wind]

Vue version

3.2.41

Link to minimal reproduction

链接

Steps to reproduce

场景搭配：
transition 包裹keepAlive. ,keepAlive包裹动态组件

示例：

What is expected?

期望修复.
翻看了源码：
BaseTransition组件，里面emptyPlaceholder函数清空了keepAlive组件的child,导致了内容渲染失效。

建议删除 vnode.children = null 进行修复

What is actually happening?

导致二次切换相同路由，导致子组件内容不渲染

System Info

No response

Any additional comments?

尽管可以在各组件间加其他组件进行隔离，从而避免此问题发生，但是有时候开发者遇到此问题毫无头绪，从而浪费很多时间。
至于为什么增加children置空，我猜测可能是因为垃圾回收机制，但是此刻children的type函数，所以每次会进行重新生成，所以此处担忧有点多余。

[zhangzhonghe]

你好，请使用 Playground 提供一个最小版本的复现，用以定位具体问题，感谢。

[enjoy-wind]

@zhangzhonghe 已完成Demo复现

经过我调试发现，只有在Fragment组件中才能重现，为此还有另一种比较好的方案修复，在renderer组件中removeFragment方法里面增加 transition.afterLeave()函数，让BaseTransion发生二次渲染.

[zhangzhonghe]

minimal reproduction

[zhangzhonghe]

@edison1105 麻烦可以看一下吗？谢谢。

[edison1105]

transition只能有一个根节点，控制台已经有警告了。套一层div就行了。

<transition mode="out-in">
  <div>
	  <component :is="toggle ? Comp1 : Comp2" />   
  </div>
</transition>

[enjoy-wind]

@edison1105 @zhangzhonghe
我的意见是建议修复，理由有3点：
1.Vue3.0已经支持多片段组件了，没有理由transition不支持.
2.虽然给予了警告，但是初次渲染是OK的，很多不会想到是警告引起的，从而让开发者排查很长时间.
3.经过调试，已经初步定位问题所在，简单的代码片段即可完成修复.

[edison1105]

transition设计就是只能支持一个根节点。对于多个根节点，你应该使用：TransitionGroup.https://vuejs.org/guide/built-ins/transition-group.html

[favouredddd]

我也遇到过了。