test: add test

diff --git a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts
index adc8ed66c7789c76a14462ea8ddef2f766fa660f..82b395e3b9d4d24162e35befa07895bc3cf98dff 100644 (file)
--- a/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/useTemplateRef.spec.ts
@@ -1,10 +1,13 @@
 import {
   type ShallowRef,
+  getCurrentInstance,
   h,
+  isReactive,
   nextTick,
   nodeOps,
   ref,
   render,
+  serializeInner,
   useTemplateRef,
 } from '@vue/runtime-test'
 
@@ -70,6 +73,58 @@ describe('useTemplateRef', () => {
     expect(t1!.value).toBe(null)
   })
 
+  // #12731
+  test('should collect refs as reactive array in v-for', async () => {
+    let t1: any
+    const list = ref<number[]>([])
+    let currentInstance: any
+    const Comp = {
+      setup() {
+        t1 = useTemplateRef('refKey')
+        currentInstance = getCurrentInstance()!
+      },
+      render() {
+        return h('div', null, [
+          h('div', null, String(t1.value?.length)),
+          h(
+            'ul',
+            list.value.map(i =>
+              h(
+                'li',
+                {
+                  ref: 'refKey',
+                  ref_for: true,
+                },
+                i,
+              ),
+            ),
+          ),
+        ])
+      },
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(t1!.value).toBe(null)
+    expect(serializeInner(root)).toBe(
+      '<div><div>undefined</div><ul></ul></div>',
+    )
+
+    list.value.push(1)
+    await nextTick()
+    expect(isReactive(currentInstance.refs['refKey'])).toBe(true)
+    expect(t1!.value.length).toBe(1)
+    expect(serializeInner(root)).toBe(
+      '<div><div>1</div><ul><li>1</li></ul></div>',
+    )
+
+    list.value.push(2)
+    await nextTick()
+    expect(t1!.value.length).toBe(2)
+    expect(serializeInner(root)).toBe(
+      '<div><div>2</div><ul><li>1</li><li>2</li></ul></div>',
+    )
+  })
+
   test('should warn on duplicate useTemplateRef', () => {
     const root = nodeOps.createElement('div')
     render(

diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts
index ae746fe0c8371579f34c01763796af223a1af71f..76f50c4a81a38a8f4de2facd42eb032f9fa331e2 100644 (file)
--- a/packages/runtime-core/src/rendererTemplateRef.ts
+++ b/packages/runtime-core/src/rendererTemplateRef.ts
@@ -130,7 +130,7 @@ export function setRef(
                   setupState[ref] = refs[ref]
                 }
               } else {
-                ref.value = shallowReactive([refValue])
+                ref.value = [refValue]
                 if (rawRef.k) refs[rawRef.k] = ref.value
               }
             } else if (!existing.includes(refValue)) {