fix(templateRef): prevent unnecessary set ref on dynamic ref change or component unmount #12642
Conversation
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
This reverts commit 8642732.
There was a problem hiding this comment.
There's another part of the code, around line 100, that sets the ref to null (see // dynamic ref changed. unset old ref). I think that would also need to take account of the pending jobs, e.g.:
In the Playground, the ref name is changed from a to b, but a is still populated because the job is still queued.
|
""" WalkthroughA new test case was added to verify template ref behavior when a child component is unmounted and updated in the same tick. The renderer logic was updated to track and cancel pending ref-setting jobs, ensuring that refs are correctly cleared when a component is unmounted, even if an update and unmount happen simultaneously. Changes
Sequence Diagram(s)sequenceDiagram
participant Parent
participant Child
participant Renderer
participant Ref
Parent->>Child: Passes prop (show)
Child->>Parent: Emits "change" event
Parent->>Renderer: Sets toggle to false (unmount Child)
Renderer->>Ref: Schedules setRef (non-null)
Renderer->>Ref: Checks for pending setRef on unmount
Ref->>Renderer: Cancels pending setRef, sets ref to null immediately
Assessment against linked issues
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/runtime-core/src/rendererTemplateRef.ts (2)
21-22: Consider documenting the purpose ofpendingSetRefMap.A short JSDoc comment explaining that the WeakMap tracks scheduled
setRefjobs (so they can be cancelled on unmount) would improve readability for future maintainers who are unfamiliar with the new cancellation flow.
165-169: Guard againstundefinedflags when disposing the pending job.If
flagsis stillundefined, the compound|=assignment mutates it through an implicitundefined → 0coercion.
Being explicit keeps the intent clear and silences potential ESLint / TS complaints:- pendingSetRef.flags! |= SchedulerJobFlags.DISPOSED +pendingSetRef.flags = (pendingSetRef.flags ?? 0) | SchedulerJobFlags.DISPOSED
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/runtime-core/__tests__/rendererTemplateRef.spec.ts(2 hunks)packages/runtime-core/src/rendererTemplateRef.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/runtime-core/src/rendererTemplateRef.ts (2)
packages/runtime-core/src/scheduler.ts (1)
SchedulerJob(27-39)packages/runtime-core/src/renderer.ts (1)
queuePostRenderEffect(286-295)
🔇 Additional comments (1)
packages/runtime-core/__tests__/rendererTemplateRef.spec.ts (1)
183-226: Great regression test – covers the simultaneous update + unmount edge-case.The scenario faithfully reproduces #12639 and would fail without the new cancellation logic. No issues spotted.
|
/ecosystem-ci run |
|
📝 Ran ecosystem CI: Open
|
|
@skirtles-code |
close #12639
Summary by CodeRabbit
Bug Fixes
Tests