From 1dff44693e4707aabb166d388c44a4556e8086c9 Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 21 Jan 2025 10:24:21 +0800 Subject: [PATCH 1/6] fix(useTemplateRef): don't update setup ref for useTemplateRef key --- .../src/helpers/useTemplateRef.ts | 22 +++++++++++++------ .../runtime-core/src/rendererTemplateRef.ts | 11 +++++++++- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 4cb10ea8139..025c3e90d83 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -1,5 +1,5 @@ import { type ShallowRef, readonly, shallowRef } from '@vue/reactivity' -import { getCurrentInstance } from '../component' +import { type Data, getCurrentInstance } from '../component' import { warn } from '../warning' import { EMPTY_OBJ } from '@vue/shared' @@ -12,12 +12,7 @@ export function useTemplateRef( const r = shallowRef(null) if (i) { const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs - let desc: PropertyDescriptor | undefined - if ( - __DEV__ && - (desc = Object.getOwnPropertyDescriptor(refs, key)) && - !desc.configurable - ) { + if (__DEV__ && isUseTemplateRefKey(refs, key)) { warn(`useTemplateRef('${key}') already exists.`) } else { Object.defineProperty(refs, key, { @@ -38,3 +33,16 @@ export function useTemplateRef( } return ret } + +export function isUseTemplateRefKey(refs: Data, key: string): boolean { + let desc: PropertyDescriptor | undefined + if ( + __DEV__ && + (desc = Object.getOwnPropertyDescriptor(refs, key)) && + !desc.configurable + ) { + return true + } + + return false +} diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index ca21030dc35..664cea6e687 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -16,7 +16,10 @@ import { ErrorCodes, callWithErrorHandling } from './errorHandling' import type { SchedulerJob } from './scheduler' import { queuePostRenderEffect } from './renderer' import { type ComponentOptions, getComponentPublicInstance } from './component' -import { knownTemplateRefs } from './helpers/useTemplateRef' +import { + isUseTemplateRefKey, + knownTemplateRefs, +} from './helpers/useTemplateRef' /** * Function for handling a template ref @@ -91,6 +94,12 @@ export function setRef( return false } } + + // skip setting up ref if the key is from useTemplateRef + if (isUseTemplateRefKey(refs, key)) { + return false + } + return hasOwn(rawSetupState, key) } From 3a16ebca7c2441611a4be344a93e92472adb436e Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 21 Jan 2025 10:25:26 +0800 Subject: [PATCH 2/6] chore: update --- packages/runtime-core/src/helpers/useTemplateRef.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 025c3e90d83..915c5911e50 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -37,7 +37,6 @@ export function useTemplateRef( export function isUseTemplateRefKey(refs: Data, key: string): boolean { let desc: PropertyDescriptor | undefined if ( - __DEV__ && (desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable ) { From 0d9a8cb62569438ca37f3f12b538e9e0d3832008 Mon Sep 17 00:00:00 2001 From: edison Date: Tue, 21 Jan 2025 10:31:17 +0800 Subject: [PATCH 3/6] Update packages/runtime-core/src/helpers/useTemplateRef.ts Co-authored-by: Jacek Karczmarczyk --- packages/runtime-core/src/helpers/useTemplateRef.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 915c5911e50..94903aa778e 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -36,12 +36,6 @@ export function useTemplateRef( export function isUseTemplateRefKey(refs: Data, key: string): boolean { let desc: PropertyDescriptor | undefined - if ( - (desc = Object.getOwnPropertyDescriptor(refs, key)) && + return (desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable - ) { - return true - } - - return false } From 0cc01374d844c3b60c110af9f69525c904a615f9 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Tue, 21 Jan 2025 02:32:06 +0000 Subject: [PATCH 4/6] [autofix.ci] apply automated fixes --- packages/runtime-core/src/helpers/useTemplateRef.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 94903aa778e..92b5bcc26a3 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -36,6 +36,7 @@ export function useTemplateRef( export function isUseTemplateRefKey(refs: Data, key: string): boolean { let desc: PropertyDescriptor | undefined - return (desc = Object.getOwnPropertyDescriptor(refs, key)) && - !desc.configurable + return ( + (desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable + ) } From b9cd226d2342f78464487bc8aca0cc4aff3d27d3 Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 21 Jan 2025 10:33:41 +0800 Subject: [PATCH 5/6] chore: minor tweaks --- packages/runtime-core/src/helpers/useTemplateRef.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 92b5bcc26a3..1a6c87ea816 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -36,7 +36,7 @@ export function useTemplateRef( export function isUseTemplateRefKey(refs: Data, key: string): boolean { let desc: PropertyDescriptor | undefined - return ( + return !!( (desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable ) } From e4208e452dc069c2abdb23403652909d1d068c40 Mon Sep 17 00:00:00 2001 From: daiwei Date: Tue, 21 Jan 2025 10:57:07 +0800 Subject: [PATCH 6/6] test: add tests --- .../__tests__/helpers/useTemplateRef.spec.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts index adc8ed66c77..047df6b492b 100644 --- a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts +++ b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts @@ -3,6 +3,7 @@ import { h, nextTick, nodeOps, + onMounted, ref, render, useTemplateRef, @@ -125,4 +126,25 @@ describe('useTemplateRef', () => { __DEV__ = true } }) + + // #12749 + test(`don't update setup ref for useTemplateRef key`, () => { + let foo: ShallowRef + const Comp = { + setup() { + foo = useTemplateRef('bar') + const bar = ref(null) + onMounted(() => { + expect(bar.value).toBe(null) + }) + return { bar } + }, + render() { + return h('div', { ref: 'bar' }) + }, + } + const root = nodeOps.createElement('div') + render(h(Comp), root) + expect(foo!.value).toBe(root.children[0]) + }) })