Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(runtime-core): track template ref keys to prevent setupState writes#14372

Closed
serkodev wants to merge 2 commits into
vuejs:mainfrom
serkodev:fix/template-ref-keys
Closed

fix(runtime-core): track template ref keys to prevent setupState writes#14372
serkodev wants to merge 2 commits into
vuejs:mainfrom
serkodev:fix/template-ref-keys

Conversation

@serkodev

@serkodev serkodev commented Jan 28, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Member

Prevents setupState ref writes for keys created via useTemplateRef by tracking template-ref keys on refs.

Fixed #14371

Summary by CodeRabbit

  • Bug Fixes
    • Fixed a collision issue where template refs and setup refs sharing the same key would incorrectly overwrite each other. Template refs now take precedence, and setup refs are prevented from conflicting with them.

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

@coderabbitai

coderabbitai Bot commented Jan 28, 2026 •
edited
Loading

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

The changes introduce per-component template reference key tracking to prevent setup refs from being overwritten when a template ref with the same key is created. A new test case validates this collision prevention, two helper functions track registered template ref keys, and a guard blocks setup ref configuration when a key collision is detected.

Changes

Cohort / File(s) Summary
Test Addition
packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts		 Added test case verifying that setup refs and template refs with the same key do not overwrite each other; setup ref retains original value while template ref resolves to DOM element
Template Ref Tracking
packages/runtime-core/src/helpers/useTemplateRef.ts		 Introduced registerTemplateRefKey() and hasTemplateRefKey() helpers to track template ref keys per-component using Symbol-based storage; useTemplateRef() now registers keys when creating refs
Collision Guard
packages/runtime-core/src/rendererTemplateRef.ts		 Added guard in canSetSetupRef() that returns false if a key is already registered as a template ref, preventing setup ref configuration when collision detected

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • #13449 — Both PRs enhance template-ref handling in runtime-core by adding guards and validation to prevent ref conflicts and mutations

Suggested labels

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

Poem

🐰 A collision averted with care,
Setup and template refs now share,
With keys tracked true and guards in place,
Each ref now owns its rightful space!

🚥 Pre-merge checks | ✅ 4 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: tracking template ref keys to prevent setupState writes, directly addressing the linked issue.
Linked Issues check ✅ Passed The pull request implements the core requirement from issue #14371: preventing template refs from overwriting setup refs with the same name through key tracking and guarding logic.
Out of Scope Changes check ✅ Passed All changes are directly related to the objective: adding test coverage for the collision scenario, introducing template ref key tracking helpers, and adding guards to prevent setupState writes.

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

✨ Finishing touches
  • 📝 Generate docstrings

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.

@github-actions

github-actions Bot commented Jan 28, 2026

Copy link
Copy Markdown

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 103 kB (+143 B) 39.1 kB (+41 B) 35.3 kB (+90 B)
vue.global.prod.js 162 kB (+143 B) 59.1 kB (+46 B) 52.7 kB (+89 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 47.1 kB (+69 B) 18.4 kB (+38 B) 16.9 kB (+36 B)
createApp 55.2 kB (+73 B) 21.4 kB (+30 B) 19.6 kB (+30 B)
createSSRApp 59.5 kB (+69 B) 23.2 kB (+16 B) 21.2 kB (+18 B)
defineCustomElement 60.8 kB (+69 B) 23.2 kB (+39 B) 21.2 kB (+40 B)
overall 69.6 kB (+69 B) 26.7 kB (+37 B) 24.4 kB (+63 B)

@pkg-pr-new

pkg-pr-new Bot commented Jan 28, 2026

Copy link
Copy Markdown

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: 66594c0

@edison1105

edison1105 commented Jan 29, 2026

Copy link
Copy Markdown
Member

duplcaite of #12756

Thanks for the PR. But we also consider PROD mode
see repl with this PR

@edison1105 edison1105 closed this Jan 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

useTemplateRef should not override setup refs with the same name

2 participants

@serkodev @edison1105