fix(KeepAlive): use resolved component name for async components in cache pruning #14212

huangxiuqi · 2025-12-17T02:25:59Z

Summary by CodeRabbit

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.}

coderabbitai · 2025-12-17T02:26:10Z

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 using CodeRabbit! 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.}

coderabbitai

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:
function getComponentForNameCheck(vnode: VNode): ConcreteComponent {
  return isAsyncWrapper(vnode)
    ? (vnode.type as ComponentOptions).__asyncResolved || {}
    : (vnode.type as ConcreteComponent)
}
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 between d8a2de4 and 75519f8.

📒 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 the include 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.

github-actions · 2025-12-17T10:11:08Z

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)

pkg-pr-new · 2025-12-17T10:11:14Z

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

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

75519f8

…props vuejs#14210

coderabbitai bot reviewed Dec 17, 2025

View reviewed changes

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

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-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Dec 17, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(KeepAlive): use resolved component name for async components in cache pruning #14212

fix(KeepAlive): use resolved component name for async components in cache pruning #14212

huangxiuqi commented Dec 17, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Dec 17, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

github-actions bot commented Dec 17, 2025

Uh oh!

pkg-pr-new bot commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix(KeepAlive): use resolved component name for async components in cache pruning #14212

Are you sure you want to change the base?

fix(KeepAlive): use resolved component name for async components in cache pruning #14212

Conversation

huangxiuqi commented Dec 17, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 17, 2025

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new bot commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

huangxiuqi commented Dec 17, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 17, 2025 •

edited

Loading