Skip to content

fix(keep-alive): defer keep-alive branch updates while inactive#14708

Draft
edison1105 wants to merge 3 commits intomainfrom
edison/fix/12017
Draft

fix(keep-alive): defer keep-alive branch updates while inactive#14708
edison1105 wants to merge 3 commits intomainfrom
edison/fix/12017

Conversation

@edison1105
Copy link
Copy Markdown
Member

@edison1105 edison1105 commented Apr 10, 2026

close #12017
close vuejs/router#626

When a component update and a KeepAlive branch deactivation happen in the same flush, the deactivated branch can still finish its queued child update. In nested KeepAlive / keyed dynamic component cases, this can mount the next child twice: once in the deactivated cached branch and once in the newly active branch.

Fix this by tracking deferred updates for inactive KeepAlive branches in the renderer and replaying them after the branch is activated again. This keeps the change scoped to KeepAlive branch activation state, preserves nested KeepAlive boundaries, and ensures re-activation applies the latest pending state.

Summary by CodeRabbit

  • Bug Fixes

    • Improved KeepAlive component's handling of nested dynamic component instances to prevent duplicate mounting.
    • Fixed deferred update handling in KeepAlive when branches are reactivated, ensuring only the latest updates are applied.
  • Tests

    • Added comprehensive test coverage for KeepAlive branch state management and update scenarios.

close #12017
close vuejs/router#626

When a component update and a KeepAlive branch deactivation happen in the same
flush, the deactivated branch can still finish its queued child update. In
nested KeepAlive / keyed dynamic component cases, this can mount the next child
twice: once in the deactivated cached branch and once in the newly active
branch.

Fix this by tracking deferred updates for inactive KeepAlive branches in the
renderer and replaying them after the branch is activated again. This keeps the
change scoped to KeepAlive branch activation state, preserves nested KeepAlive
boundaries, and ensures re-activation applies the latest pending state.
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 10, 2026

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: eec9cb4e-bc56-41ee-913c-f37d470f7449

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • ✅ Review completed - (🔄 Check again to review again)
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch edison/fix/12017

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

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 10, 2026

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 106 kB (+591 B) 40.1 kB (+194 B) 36 kB (+156 B)
vue.global.prod.js 164 kB (+591 B) 60.1 kB (+218 B) 53.4 kB (+219 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 48.7 kB (+408 B) 18.9 kB (+134 B) 17.3 kB (+107 B)
createApp 56.8 kB (+396 B) 22 kB (+125 B) 20.1 kB (+104 B)
createSSRApp 61.1 kB (+396 B) 23.7 kB (+135 B) 21.6 kB (+116 B)
defineCustomElement 63 kB (+396 B) 23.9 kB (+125 B) 21.8 kB (+114 B)
overall 71.6 kB (+591 B) 27.4 kB (+193 B) 24.9 kB (+177 B)

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 10, 2026

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14708
npm i https://pkg.pr.new/@vue/compiler-core@14708
yarn add https://pkg.pr.new/@vue/compiler-core@14708.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14708
npm i https://pkg.pr.new/@vue/compiler-dom@14708
yarn add https://pkg.pr.new/@vue/compiler-dom@14708.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14708
npm i https://pkg.pr.new/@vue/compiler-sfc@14708
yarn add https://pkg.pr.new/@vue/compiler-sfc@14708.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14708
npm i https://pkg.pr.new/@vue/compiler-ssr@14708
yarn add https://pkg.pr.new/@vue/compiler-ssr@14708.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14708
npm i https://pkg.pr.new/@vue/reactivity@14708
yarn add https://pkg.pr.new/@vue/reactivity@14708.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14708
npm i https://pkg.pr.new/@vue/runtime-core@14708
yarn add https://pkg.pr.new/@vue/runtime-core@14708.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14708
npm i https://pkg.pr.new/@vue/runtime-dom@14708
yarn add https://pkg.pr.new/@vue/runtime-dom@14708.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14708
npm i https://pkg.pr.new/@vue/server-renderer@14708
yarn add https://pkg.pr.new/@vue/server-renderer@14708.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14708
npm i https://pkg.pr.new/@vue/shared@14708
yarn add https://pkg.pr.new/@vue/shared@14708.tgz

vue

pnpm add https://pkg.pr.new/vue@14708
npm i https://pkg.pr.new/vue@14708
yarn add https://pkg.pr.new/vue@14708.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14708
npm i https://pkg.pr.new/@vue/compat@14708
yarn add https://pkg.pr.new/@vue/compat@14708.tgz

commit: 2160fc0

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
packages/runtime-core/src/renderer.ts (1)

2628-2642: Consider adding explicit return type annotation.

The function works correctly, but adding an explicit return type improves code clarity and documentation:

📝 Suggested type annotation
 export function setKeepAliveBranchActive(
   instance: ComponentInternalInstance,
   active: boolean,
-): Set<ComponentInternalInstance> | undefined {
+): Set<ComponentInternalInstance> | void {
   if (active) {
     const updates = deferredKeepAliveBranchUpdates.get(instance)
     deferredKeepAliveBranchUpdates.delete(instance)
     return updates
   }

   // Child updates will be collected under this inactive KeepAlive root.
   if (!deferredKeepAliveBranchUpdates.has(instance)) {
     deferredKeepAliveBranchUpdates.set(instance, new Set())
   }
+  // Implicit void return when deactivating
 }

Actually, looking closer the current signature Set<ComponentInternalInstance> | undefined is already present. The implementation is correct as-is.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/runtime-core/src/renderer.ts` around lines 2628 - 2642, No change
required: the function setKeepAliveBranchActive already has an explicit return
type annotation (Set<ComponentInternalInstance> | undefined) and the
implementation matches that signature; leave the function declaration and body
(including deferredKeepAliveBranchUpdates handling and returned updates) as-is.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/runtime-core/src/renderer.ts`:
- Around line 2628-2642: No change required: the function
setKeepAliveBranchActive already has an explicit return type annotation
(Set<ComponentInternalInstance> | undefined) and the implementation matches that
signature; leave the function declaration and body (including
deferredKeepAliveBranchUpdates handling and returned updates) as-is.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ccac7bfc-3604-45e4-9b8b-aba21ed6a30c

📥 Commits

Reviewing files that changed from the base of the PR and between 2b7d39c and 145abe9.

📒 Files selected for processing (3)
  • packages/runtime-core/__tests__/components/KeepAlive.spec.ts
  • packages/runtime-core/src/components/KeepAlive.ts
  • packages/runtime-core/src/renderer.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

keep-alive component in nested route result in child route mounted twice nested router with nested keepalive will invoke onMouted twice

1 participant