fix(compiler-core): warn using reactive array as a ref inside v-for i…

…n script setup

packages/runtime-core/__tests__/rendererTemplateRef.spec.ts

@@ -539,4 +539,42 @@ describe('api: template refs', () => {
       '<div><div>[object Object],[object Object]</div><ul><li>2</li><li>3</li></ul></div>',
     )
   })
+
+  // #10655 warn if reactive array used as a ref inside v-for
+  test('string ref pointing to reactive() in v-for, should warn that it will not work in prod for scripSetup', () => {
+    const list = ref([1, 2, 3])
+    const reactiveRef = reactive([])
+    const App = {
+      setup() {
+        return {
+          reactiveRef,
+          __isScriptSetup: true,
+        }
+      },
+      render() {
+        return h('div', null, [
+          h(
+            'ul',
+            list.value.map(i =>
+              h(
+                'li',
+                {
+                  ref: 'reactiveRef',
+                  ref_for: true,
+                },
+                i,
+              ),
+            ),
+          ),
+        ])
+      },
+    }
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+
+    expect(
+      'In production mode reactive ref array will not be filled. ' +
+        'Use ref() instead.',
+    ).toHaveBeenWarned()
+  })
 })

packages/runtime-core/src/rendererTemplateRef.ts

@@ -12,7 +12,7 @@ import {
 import { isAsyncWrapper } from './apiAsyncComponent'
 import { getExposeProxy } from './component'
 import { warn } from './warning'
-import { isRef } from '@vue/reactivity'
+import { isReactive, isRef } from '@vue/reactivity'
 import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 import type { SchedulerJob } from './scheduler'
 import { queuePostRenderEffect } from './renderer'
@@ -103,6 +103,20 @@ export function setRef(
                 if (rawRef.k) refs[rawRef.k] = ref.value
               }
             } else if (!existing.includes(refValue)) {
+              // #10655 warn if reactive array used as a ref
+              if (
+                __DEV__ &&
+                _isString &&
+                hasOwn(owner.devtoolsRawSetupState, ref) &&
+                !isRef(owner.devtoolsRawSetupState[ref]) &&
+                isReactive(owner.devtoolsRawSetupState[ref]) &&
+                hasOwn(setupState, '__isScriptSetup')
+              ) {
+                warn(
+                  'In production mode reactive ref array will not be filled. ' +
+                    'Use ref() instead.',
+                )
+              }
               existing.push(refValue)
             }
           }