fix(runtime-core): invalidate detached v-for memo vnodes after unmount

[edison1105]

fix #12708
close #12710

Summary by CodeRabbit

• Bug Fixes

  • Improved cache validation for v-memo-optimized elements within dynamic lists.
  • Fixed element unmounting to properly clean up memoized element caches when removed.

• Tests

  • Added integration tests for v-memo behavior with conditional and list rendering scenarios.

[coderabbitai]

📝 Walkthrough

Walkthrough

This change fixes a bug where v-memo incorrectly skips updates when used with v-for inside v-if. The fix tightens the cache guard condition in the compiler, adds memo invalidation logic in the renderer's unmount function, and includes integration tests verifying the corrected behavior.

Changes

Cohort / File(s)	Summary
Compiler v-for cache guard packages/compiler-core/src/transforms/vFor.ts	Tightened cache guard condition to check both _cached existence and _cached.el presence before using cached v-for vnodes.
Runtime unmount memo invalidation packages/runtime-core/src/renderer.ts	Enhanced unmount logic to detect memoized vnodes without cache indices and schedule post-render effects to invalidate their cached state by setting vnode.el = null.
v-memo integration tests packages/runtime-core/__tests__/helpers/withMemo.spec.ts	Added two comprehensive integration tests validating v-memo behavior with combined v-if and v-for, covering both dev and production modes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• fix(runtime-core): avoid retaining el on cached text vnodes during static traversal #14419: Modifies renderer to avoid retaining vnode.el on cached/memoized vnodes during unmount and static traversal.
• fix(compiler-core): prevent cached array children from retaining detached dom nodes #13691: Addresses cached vnode lifecycle issues by fixing cache cleanup and preventing retention of detached DOM nodes.

Suggested labels

scope: compiler, :hammer: p3-minor-bug

Poem

🐰 A memo that forgot its place,
Lost in if-for's tangled case,
Now guards check twice, unmount runs clean,
The clearest caches you've e'er seen! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR properly addresses issue #12708 by fixing the v-memo skip-update bug with v-for inside v-if through invalidating memoized vnodes on unmount.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the v-memo bug: vFor.ts cache guard tightening, renderer.ts memo invalidation logic, and withMemo.spec.ts tests.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main change: invalidating memoized vnodes in v-for loops after unmount, which directly addresses the core issue of v-memo skipping updates when used with v-for inside v-if.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch edison/fix/memoWithFor

---

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

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	105 kB (+48 B)	39.7 kB (+24 B)	35.7 kB (+6 B)
vue.global.prod.js	163 kB (+62 B)	59.7 kB (+28 B)	53.1 kB (-11 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.2 kB (+48 B)	18.8 kB (+25 B)	17.2 kB (+20 B)
createApp	56.4 kB (+48 B)	21.8 kB (+24 B)	19.9 kB (+24 B)
createSSRApp	60.6 kB (+48 B)	23.6 kB (+20 B)	21.5 kB (+38 B)
defineCustomElement	62.5 kB (+48 B)	23.7 kB (+24 B)	21.6 kB (+26 B)
overall	70.8 kB (+48 B)	27.1 kB (+27 B)	24.8 kB (+102 B)

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-dom

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-sfc

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-ssr

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/reactivity

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-core

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-dom

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/server-renderer

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/shared

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

vue

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

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

yarn add https://pkg.pr.new/[email protected]

@vue/compat

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

commit: 8455323

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
pinia	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
router	✅ success	✅ success
primevue	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success
language-tools	❌ failure	❌ failure
vue-macros	✅ success	✅ success
vuetify	✅ success	✅ success
vue-i18n	✅ success	✅ success
quasar	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
radix-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vueuse	✅ success	✅ success
nuxt	✅ success	✅ success