fix(runtime-core): handle shallow reactive arrays in renderList correctly (#11870)

close #11869

Author: jh-leong

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

@@ -1,3 +1,4 @@
+import { isReactive, reactive, shallowReactive } from '../../src/index'
 import { renderList } from '../../src/helpers/renderList'
 
 describe('renderList', () => {
@@ -56,4 +57,12 @@ describe('renderList', () => {
       renderList(undefined, (item, index) => `node ${index}: ${item}`),
     ).toEqual([])
   })
+
+  it('should render items in a reactive array correctly', () => {
+    const reactiveArray = reactive([{ foo: 1 }])
+    expect(renderList(reactiveArray, isReactive)).toEqual([true])
+
+    const shallowReactiveArray = shallowReactive([{ foo: 1 }])
+    expect(renderList(shallowReactiveArray, isReactive)).toEqual([false])
+  })
 })

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

@@ -1,5 +1,10 @@
 import type { VNode, VNodeChild } from '../vnode'
-import { isReactive, shallowReadArray, toReactive } from '@vue/reactivity'
+import {
+  isReactive,
+  isShallow,
+  shallowReadArray,
+  toReactive,
+} from '@vue/reactivity'
 import { isArray, isObject, isString } from '@vue/shared'
 import { warn } from '../warning'
 
@@ -63,13 +68,15 @@ export function renderList(
 
   if (sourceIsArray || isString(source)) {
     const sourceIsReactiveArray = sourceIsArray && isReactive(source)
+    let needsWrap = false
     if (sourceIsReactiveArray) {
+      needsWrap = !isShallow(source)
       source = shallowReadArray(source)
     }
     ret = new Array(source.length)
     for (let i = 0, l = source.length; i < l; i++) {
       ret[i] = renderItem(
-        sourceIsReactiveArray ? toReactive(source[i]) : source[i],
+        needsWrap ? toReactive(source[i]) : source[i],
         i,
         undefined,
         cached && cached[i],