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],