feat(useTemplateRef): allows useTemplateRef to be called multiple times using the same key

Author: edison1105

packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts

@@ -70,18 +70,22 @@ describe('useTemplateRef', () => {
     expect(t1!.value).toBe(null)
   })
 
-  test('should warn on duplicate useTemplateRef', () => {
+  test('should return same element for multiple useTemplateRef calls with same key', async () => {
+    let t1, t2
+    const key = ref('foo')
     const root = nodeOps.createElement('div')
     render(
       h(() => {
-        useTemplateRef('foo')
-        useTemplateRef('foo')
-        return ''
+        t1 = useTemplateRef('foo')
+        t2 = useTemplateRef('foo')
+        return h('div', { ref: key.value })
       }),
       root,
     )
-
-    expect(`useTemplateRef('foo') already exists.`).toHaveBeenWarned()
+    await nextTick()
+    expect(t1!.value).toBe(root.children[0])
+    expect(t2!.value).toBe(root.children[0])
+    expect(t1!.value).toBe(t2!.value)
   })
 
   // #11795

packages/runtime-core/src/component.ts

@@ -2,6 +2,7 @@ import { type VNode, type VNodeChild, isVNode } from './vnode'
 import {
   EffectScope,
   type ReactiveEffect,
+  type ShallowRef,
   TrackOpTypes,
   isRef,
   markRaw,
@@ -461,6 +462,12 @@ export interface ComponentInternalInstance {
   refs: Data
   emit: EmitFn
 
+  /**
+   * used for caching useTemplateRef results
+   * @internal
+   */
+  refsCache?: Map<string, ShallowRef>
+
   /**
    * used for keeping track of .once event handlers on components
    * @internal

packages/runtime-core/src/helpers/useTemplateRef.ts

@@ -12,14 +12,12 @@ export function useTemplateRef<T = unknown, Keys extends string = string>(
   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
-    ) {
-      warn(`useTemplateRef('${key}') already exists.`)
+    const refsCache =
+      i.refsCache || (i.refsCache = new Map<string, ShallowRef>())
+    if (refsCache.has(key)) {
+      return refsCache.get(key)!
     } else {
+      refsCache.set(key, r)
       Object.defineProperty(refs, key, {
         enumerable: true,
         get: () => r.value,