perf: avoid array map in v-for read array

vuejs · Feb 26, 2024 · 13d31d5 · 13d31d5
1 parent b868e15
commit 13d31d5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/packages/reactivity/__benchmarks__/reactiveArray.bench.ts b/packages/reactivity/__benchmarks__/reactiveArray.bench.ts
@@ -1,5 +1,5 @@
 import { bench } from 'vitest'
-import { effect, reactive, reactiveReadArray, shallowReadArray } from '../src'
+import { effect, reactive, shallowReadArray } from '../src'
 
 for (let amount = 1e1; amount < 1e4; amount *= 10) {
   {

diff --git a/packages/reactivity/src/index.ts b/packages/reactivity/src/index.ts
@@ -31,6 +31,8 @@ export {
   shallowReadonly,
   markRaw,
   toRaw,
+  toReactive,
+  toReadonly,
   type Raw,
   type DeepReadonly,
   type ShallowReactive,

diff --git a/packages/runtime-core/src/helpers/renderList.ts b/packages/runtime-core/src/helpers/renderList.ts
@@ -1,5 +1,5 @@
 import type { VNode, VNodeChild } from '../vnode'
-import { reactiveReadArray } from '@vue/reactivity'
+import { isReactive, shallowReadArray, toReactive } from '@vue/reactivity'
 import { isArray, isObject, isString } from '@vue/shared'
 import { warn } from '../warning'
 
@@ -60,14 +60,20 @@ export function renderList(
   let ret: VNodeChild[]
   const cached = (cache && cache[index!]) as VNode[] | undefined
   const sourceIsArray = isArray(source)
+  const sourceIsReactiveArray = sourceIsArray && isReactive(source)
 
   if (sourceIsArray || isString(source)) {
-    if (sourceIsArray) {
-      source = reactiveReadArray(source)
+    if (sourceIsReactiveArray) {
+      source = shallowReadArray(source)
     }
     ret = new Array(source.length)
     for (let i = 0, l = source.length; i < l; i++) {
-      ret[i] = renderItem(source[i], i, undefined, cached && cached[i])
+      ret[i] = renderItem(
+        sourceIsReactiveArray ? toReactive(source[i]) : source[i],
+        i,
+        undefined,
+        cached && cached[i],
+      )
     }
   } else if (typeof source === 'number') {
     if (__DEV__ && !Number.isInteger(source)) {