From 4effc9dade628e4fd50d7fe28dfed017050fbe93 Mon Sep 17 00:00:00 2001
From: tycho <jh.leong@outlook.com>
Date: Mon, 9 Sep 2024 17:38:01 +0800
Subject: [PATCH 1/2] fix(runtime-core): handle shallow reactive arrays in
renderList correctly
---
packages/runtime-core/src/helpers/renderList.ts | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
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],
From f571f7164ce97111045ad47d6dc3da6efc54ea7e Mon Sep 17 00:00:00 2001
From: tycho <jh.leong@outlook.com>
Date: Mon, 9 Sep 2024 17:45:18 +0800
Subject: [PATCH 2/2] test: add test
test: update test
---
.../runtime-core/__tests__/helpers/renderList.spec.ts | 9 +++++++++
1 file changed, 9 insertions(+)
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])
+ })
})