Subscribe on changes!

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

avatar
Nov 5th 2022

Vue version

3.2.41

Link to minimal reproduction

https://github.com/vuejs/core/blob/main/packages/runtime-core/src/components/BaseTransition.ts

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函数,所以每次会进行重新生成,所以此处担忧有点多余。