From ced59ab8f2f2e89c13119bab3a0c25a1a1f1c3d6 Mon Sep 17 00:00:00 2001
From: Tycho <jh.leong@outlook.com>
Date: Tue, 10 Sep 2024 15:48:14 +0800
Subject: [PATCH] fix(runtime-core): handle shallow reactive arrays in
 renderList correctly (#11870)

close #11869
---
 .../runtime-core/__tests__/helpers/renderList.spec.ts |  9 +++++++++
 packages/runtime-core/src/helpers/renderList.ts       | 11 +++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-core/__tests__/helpers/renderList.spec.ts b/packages/runtime-core/__tests__/helpers/renderList.spec.ts
index d23a63cc08e..8dd04ff8a9b 100644
--- a/packages/runtime-core/__tests__/helpers/renderList.spec.ts
+++ b/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])
+  })
 })
diff --git a/packages/runtime-core/src/helpers/renderList.ts b/packages/runtime-core/src/helpers/renderList.ts
index 12b0317bdbd..bbcbcc13044 100644
--- a/packages/runtime-core/src/helpers/renderList.ts
+++ b/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],