From 339d2bfb05d52fe2f5497bb06b4d6aabd7d5e47b Mon Sep 17 00:00:00 2001 From: kovsu <2583695112@qq.com> Date: Mon, 17 Feb 2025 09:35:46 +0800 Subject: [PATCH 1/5] fix(runtime-core): key check in useTemplateRef --- packages/runtime-core/src/helpers/useTemplateRef.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 4cb10ea8139..e5fd9ced36b 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -12,12 +12,8 @@ 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 - ) { + const desc = Object.getOwnPropertyDescriptor(refs, key) + if (desc && !desc.configurable) { warn(`useTemplateRef('${key}') already exists.`) } else { Object.defineProperty(refs, key, { From 89d29ee99dc5266a06805d7122b88d115a9a0732 Mon Sep 17 00:00:00 2001 From: kovsu <2583695112@qq.com> Date: Mon, 17 Feb 2025 14:51:47 +0800 Subject: [PATCH 2/5] chore: add warning in DEV --- packages/runtime-core/src/helpers/useTemplateRef.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index e5fd9ced36b..2abc8ce678d 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -14,7 +14,9 @@ export function useTemplateRef( const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs const desc = Object.getOwnPropertyDescriptor(refs, key) if (desc && !desc.configurable) { - warn(`useTemplateRef('${key}') already exists.`) + if (__DEV__) { + warn(`useTemplateRef('${key}') already exists.`) + } } else { Object.defineProperty(refs, key, { enumerable: true, From 8420ff32dd38169eef107654b647ed880a1a077e Mon Sep 17 00:00:00 2001 From: kovsu <2583695112@qq.com> Date: Mon, 17 Feb 2025 15:15:18 +0800 Subject: [PATCH 3/5] test(runtime-core): enhance duplicate useTemplateRef warning and return same value --- .../runtime-core/__tests__/helpers/useTemplateRef.spec.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts index adc8ed66c77..7bb25be07c6 100644 --- a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts +++ b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts @@ -70,18 +70,20 @@ describe('useTemplateRef', () => { expect(t1!.value).toBe(null) }) - test('should warn on duplicate useTemplateRef', () => { + test('should warn and return same value on duplicate useTemplateRef', () => { + let f1, f2 const root = nodeOps.createElement('div') render( h(() => { - useTemplateRef('foo') - useTemplateRef('foo') + f1 = useTemplateRef('foo') + f2 = useTemplateRef('foo') return '' }), root, ) expect(`useTemplateRef('foo') already exists.`).toHaveBeenWarned() + expect(f1!.value).toEqual(f2!.value) }) // #11795 From 5b53f8e209ae83d5ff6f162bbf55a7f6d9eb7aef Mon Sep 17 00:00:00 2001 From: daiwei Date: Mon, 17 Feb 2025 17:21:58 +0800 Subject: [PATCH 4/5] chore: minor tweaks --- packages/runtime-core/src/helpers/useTemplateRef.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 2abc8ce678d..46413886d26 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -12,8 +12,11 @@ export function useTemplateRef( const r = shallowRef(null) if (i) { const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs - const desc = Object.getOwnPropertyDescriptor(refs, key) - if (desc && !desc.configurable) { + let desc: PropertyDescriptor | undefined + if ( + (desc = Object.getOwnPropertyDescriptor(refs, key)) && + !desc.configurable + ) { if (__DEV__) { warn(`useTemplateRef('${key}') already exists.`) } From 044b4d8a9a39ed26e50348512260e97939a05ab8 Mon Sep 17 00:00:00 2001 From: daiwei Date: Mon, 17 Feb 2025 18:10:12 +0800 Subject: [PATCH 5/5] chore: minor tweaks --- .../__tests__/helpers/useTemplateRef.spec.ts | 9 ++++++--- packages/runtime-core/src/helpers/useTemplateRef.ts | 3 ++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts index 7bb25be07c6..2e21e152bc2 100644 --- a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts +++ b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts @@ -70,19 +70,22 @@ describe('useTemplateRef', () => { expect(t1!.value).toBe(null) }) - test('should warn and return same value on duplicate useTemplateRef', () => { + test('should warn and return same value on duplicate useTemplateRef', async () => { let f1, f2 + const key = ref('foo') const root = nodeOps.createElement('div') render( h(() => { f1 = useTemplateRef('foo') f2 = useTemplateRef('foo') - return '' + return h('div', { ref: key.value }) }), root, ) - + await nextTick() expect(`useTemplateRef('foo') already exists.`).toHaveBeenWarned() + expect(f1!.value).toBe(root.children[0]) + expect(f2!.value).toBe(root.children[0]) expect(f1!.value).toEqual(f2!.value) }) diff --git a/packages/runtime-core/src/helpers/useTemplateRef.ts b/packages/runtime-core/src/helpers/useTemplateRef.ts index 46413886d26..5cceca66ec4 100644 --- a/packages/runtime-core/src/helpers/useTemplateRef.ts +++ b/packages/runtime-core/src/helpers/useTemplateRef.ts @@ -1,4 +1,4 @@ -import { type ShallowRef, readonly, shallowRef } from '@vue/reactivity' +import { type ShallowRef, readonly, shallowRef, toRef } from '@vue/reactivity' import { getCurrentInstance } from '../component' import { warn } from '../warning' import { EMPTY_OBJ } from '@vue/shared' @@ -20,6 +20,7 @@ export function useTemplateRef( if (__DEV__) { warn(`useTemplateRef('${key}') already exists.`) } + return toRef(() => refs[key]) as unknown as Readonly> } else { Object.defineProperty(refs, key, { enumerable: true,