Bug Fixes
- Improved KeepAlive to correctly identify async components when applying include/exclude filter rules, ensuring proper cache behavior with dynamic prop updates.
Tests
- Added test coverage for async components with dynamic include prop changes, verifying state preservation across visibility toggles.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

fix(KeepAlive): should work with async component when update include …

75519f8

…propsvuejs#14210

Copy link

coderabbitaibot commentedDec 17, 2025•
edited
Loading

Walkthrough

Fixed cache pruning in KeepAlive for async components by extracting the component name from the inner resolved component (__asyncResolved) instead of the wrapper vnode when determining which cache entries to prune during include/exclude prop updates. Adds test coverage for this scenario.

Changes

Cohort / File(s)	Summary
KeepAlive async component caching fix `packages/runtime-core/src/components/KeepAlive.ts`	Modified`pruneCache` method to check if vnode is an async wrapper and use the inner loaded component for name extraction; otherwise uses the original vnode.type for include/exclude filter matching
KeepAlive test coverage `packages/runtime-core/__tests__/components/KeepAlive.spec.ts`	Added test case "should work with async component when update`include` props" to verify state preservation when toggling async component visibility while dynamically updating include prop

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Verify the conditional logic correctly identifies async wrapper vnodes and extracts the resolved component name
Ensure the fix doesn't affect non-async component caching behavior
Confirm test case properly exercises the fixed async component + dynamic include scenario

Suggested labels

ready to merge,:hammer: p3-minor-bug

Poem

🐰 A cache kept losing async friends so dear,
When include props changed, they'd just disappear!
Now resolved components stay, state intact,
KeepAlive remembers—the fix is exact! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run`@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The PR fixes the identified issue by modifying KeepAlive's pruneCache to correctly extract component names from async wrappers, ensuring async components are properly cached when include list updates occur.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the async component caching issue: test coverage for async components with dynamic include props and the pruneCache logic fix for async component name resolution.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing KeepAlive to use the resolved component name for async components during cache pruning, which directly addresses the linked issue#14210.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for usingCodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment@coderabbitai help to get the list of available commands and usage tips.}

coderabbitaibot reviewed

Dec 17, 2025

View reviewed changes

Copy link

coderabbitaibot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/runtime-core/src/components/KeepAlive.ts (1)
310-316:LGTM! Consistent name resolution for async components in render logic.
The logic correctly mirrors the pruneCache implementation, ensuring that both cache pruning and include/exclude filtering use the resolved inner component for name extraction.
Consider extracting the component resolution logic into a helper function to reduce duplication:
functiongetComponentForNameCheck(vnode:VNode):ConcreteComponent{returnisAsyncWrapper(vnode)    ?(vnode.typeasComponentOptions).__asyncResolved||{}    :(vnode.typeasConcreteComponent)}
Then use it in both locations:
-const name = getComponentName(-  isAsyncWrapper(vnode)-    ? (vnode.type as ComponentOptions).__asyncResolved || {}-    : comp,-)+const name = getComponentName(getComponentForNameCheck(vnode))
This would improve maintainability if the logic needs to change in the future.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and betweend8a2de4 and75519f8.

📒 Files selected for processing (2)

packages/runtime-core/__tests__/components/KeepAlive.spec.ts (1 hunks)
packages/runtime-core/src/components/KeepAlive.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

packages/runtime-core/__tests__/components/KeepAlive.spec.ts (3)

packages/runtime-core/src/components/KeepAlive.ts (1)
KeepAlive (383-393)
packages/runtime-test/src/serialize.ts (1)
serializeInner (22-33)
packages/vue/__tests__/e2e/e2eUtils.ts (1)
timeout (16-17)

packages/runtime-core/src/components/KeepAlive.ts (2)

packages/runtime-core/src/component.ts (3)
getComponentName (1210-1217)
ComponentOptions (276-276)
ConcreteComponent (248-258)
packages/runtime-core/src/apiAsyncComponent.ts (1)
isAsyncWrapper (43-44)

🔇 Additional comments (2)

packages/runtime-core/src/components/KeepAlive.ts (1)
203-216:LGTM! Correct fix for async component name resolution in cache pruning.
The logic correctly extracts the component name from the resolved inner component (__asyncResolved) for async wrappers, ensuring that async components are properly matched against include/exclude patterns during cache pruning. The|| {} fallback safely handles cases where the async component hasn't resolved yet.
packages/runtime-core/__tests__/components/KeepAlive.spec.ts (1)
1177-1224:LGTM! Comprehensive test coverage for async component caching with include updates.
The test effectively validates the fix for issue#14210 by:
Creating and resolving an async component
Modifying component state (incrementing count)
Updating theinclude prop (triggering pruneCache)
Verifying state preservation after re-activation
The test correctly creates a new array reference on line 1216 (['Foo']), which triggers the watcher and exercises the cache pruning logic with the fixed async component name resolution.

edison1105 changed the title~~fix(KeepAlive): should work with async component when update include …~~fix(KeepAlive): should work with async component when update include prop

Dec 17, 2025

Copy link

github-actionsbot commentedDec 17, 2025

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	103 kB (+33 B)	39 kB (+4 B)	35.2 kB (+71 B)
vue.global.prod.js	161 kB (+33 B)	58.9 kB (+4 B)	52.5 kB (+17 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.9 kB	18.3 kB	16.8 kB
createApp	55 kB	21.4 kB	19.6 kB
createSSRApp	59.3 kB	23.1 kB	21.1 kB
defineCustomElement	60.6 kB	23.1 kB	21.1 kB
overall	69.4 kB (+33 B)	26.6 kB (+7 B)	24.3 kB (+4 B)

Copy link

pkg-pr-newbot commentedDec 17, 2025

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14212

npm i https://pkg.pr.new/@vue/compiler-core@14212

yarn add https://pkg.pr.new/@vue/compiler-core@14212.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14212

npm i https://pkg.pr.new/@vue/compiler-dom@14212

yarn add https://pkg.pr.new/@vue/compiler-dom@14212.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14212

npm i https://pkg.pr.new/@vue/compiler-sfc@14212

yarn add https://pkg.pr.new/@vue/compiler-sfc@14212.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14212

npm i https://pkg.pr.new/@vue/compiler-ssr@14212

yarn add https://pkg.pr.new/@vue/compiler-ssr@14212.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14212

npm i https://pkg.pr.new/@vue/reactivity@14212

yarn add https://pkg.pr.new/@vue/reactivity@14212.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14212

npm i https://pkg.pr.new/@vue/runtime-core@14212

yarn add https://pkg.pr.new/@vue/runtime-core@14212.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14212

npm i https://pkg.pr.new/@vue/runtime-dom@14212

yarn add https://pkg.pr.new/@vue/runtime-dom@14212.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14212

npm i https://pkg.pr.new/@vue/server-renderer@14212

yarn add https://pkg.pr.new/@vue/server-renderer@14212.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14212

npm i https://pkg.pr.new/@vue/shared@14212

yarn add https://pkg.pr.new/@vue/shared@14212.tgz

vue

pnpm add https://pkg.pr.new/vue@14212

npm i https://pkg.pr.new/vue@14212

yarn add https://pkg.pr.new/vue@14212.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14212

npm i https://pkg.pr.new/@vue/compat@14212

yarn add https://pkg.pr.new/@vue/compat@14212.tgz

commit:75519f8

edison1105 changed the title~~fix(KeepAlive): should work with async component when update include prop~~fix(KeepAlive): use resolved component name for async components in cache pruning

Dec 17, 2025

edison1105 added ready to merge

The PR is ready to be merged.

🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels

Dec 17, 2025

edison1105 merged commitdfe667c intovuejs:main

Dec 18, 2025

14 checks passed