Version

3.0.11

Reproduction link

https://github.com/rbonsall-turnto/async-keep-alive-example

Steps to reproduce

In the example, there are 3 tabs that switch between components wrapped in a <keep-alive> with an include for 2 of the components.

1. HelloWorld.vue - not loaded async, listed in keep-alive include
2. HelloWorldAsync.vue - loaded async, listed in keep-alive include
3. GoodbyeWorldAsync.vue - loaded async, but not listed in keep-alive include

In each tab there is a button to up the count. Click the button in each tab to establish a state change for each component. The number of the count displays in the button.

What is expected?

The 2 components that are in the keep-alive include should main their state when switching between tabs.

• HelloWorld.vue
• HelloWorldAsync.vue

The GoodbyeWorldAsync.vue component is not in the include so it should not maintain its state.

What is actually happening?

The HelloWorldAsync.vue component does not maintain its state as expected.

Whereas, the HelloWorld.vue non-async component does maintain its state as expected.

This worked in Vue 2. I discovered the issue after migrating a project to Vue 3.

Interestingly, if the "include" is removed from the <keep-alive>, all 3 components maintain their state as expected. So, it appears to work for async components, just not when listed in the <keep-alive> "include".

I encountered this problem again in version 3.27 我在3.27版本也遇到这个问题了

@yyx990803 I still encountered this problem again in version 3.x latest