feat: v-memo

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

@@ -1,4 +1,4 @@
-import { VNodeChild } from '../vnode'
+import { VNode, VNodeChild } from '../vnode'
 import { isArray, isString, isObject } from '@vue/shared'
 import { warn } from '../warning'
 
@@ -52,13 +52,17 @@ export function renderList<T>(
  */
 export function renderList(
   source: any,
-  renderItem: (...args: any[]) => VNodeChild
+  renderItem: (...args: any[]) => VNodeChild,
+  cache?: any[],
+  index?: number
 ): VNodeChild[] {
   let ret: VNodeChild[]
+  const cached = (cache && cache[index!]) as VNode[] | undefined
+
   if (isArray(source) || isString(source)) {
     ret = new Array(source.length)
     for (let i = 0, l = source.length; i < l; i++) {
-      ret[i] = renderItem(source[i], i)
+      ret[i] = renderItem(source[i], i, undefined, cached && cached[i])
     }
   } else if (typeof source === 'number') {
     if (__DEV__ && !Number.isInteger(source)) {
@@ -71,17 +75,23 @@ export function renderList(
     }
   } else if (isObject(source)) {
     if (source[Symbol.iterator as any]) {
-      ret = Array.from(source as Iterable<any>, renderItem)
+      ret = Array.from(source as Iterable<any>, (item, i) =>
+        renderItem(item, i, undefined, cached && cached[i])
+      )
     } else {
       const keys = Object.keys(source)
       ret = new Array(keys.length)
       for (let i = 0, l = keys.length; i < l; i++) {
         const key = keys[i]
-        ret[i] = renderItem(source[key], key, i)
+        ret[i] = renderItem(source[key], key, i, cached && cached[i])
       }
     }
   } else {
     ret = []
   }
+
+  if (cache) {
+    cache[index!] = ret
+  }
   return ret
 }

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

@@ -0,0 +1,29 @@
+import { currentBlock, isBlockTreeEnabled, VNode } from '../vnode'
+
+export function withMemo(
+  memo: any[],
+  render: () => VNode,
+  cache: any[],
+  index: number
+) {
+  const cached = cache[index] as VNode | undefined
+  if (cached && isMemoSame(cached.memo!, memo)) {
+    // make sure to let parent block track it when returning cached
+    if (isBlockTreeEnabled > 0 && currentBlock) {
+      currentBlock.push(cached)
+    }
+    return cached
+  }
+  const ret = render()
+  ret.memo = memo
+  return (cache[index] = ret)
+}
+
+export function isMemoSame(prev: any[], next: any[]) {
+  for (let i = 0; i < prev.length; i++) {
+    if (prev[i] !== next[i]) {
+      return false
+    }
+  }
+  return true
+}