feat: v-memo for renderEffect

packages/runtime-vapor/src/apiCreateFor.ts

@@ -19,6 +19,7 @@ import { currentInstance } from './component'
 import { componentKey } from './component'
 import type { DynamicSlot } from './componentSlots'
 import { renderEffect } from './renderEffect'
+import { withMemo } from './memo'
 
 interface ForBlock extends Fragment {
   scope: EffectScope
@@ -264,7 +265,15 @@ export const createFor = (
       memo: getMemo && getMemo(item, key, index),
       [fragmentKey]: true,
     })
-    block.nodes = scope.run(() => renderItem(state))!
+    block.nodes = scope.run(() => {
+      if (getMemo) {
+        return withMemo(
+          () => block.memo!,
+          () => renderItem(state),
+        )
+      }
+      return renderItem(state)
+    })!
 
     // TODO v-memo
     // if (getMemo) block.update()

packages/runtime-vapor/src/memo.ts

@@ -0,0 +1,8 @@
+export const memoStack: Array<() => any[]> = []
+
+export function withMemo<T>(memo: () => any[], callback: () => T): T {
+  memoStack.push(memo)
+  const res = callback()
+  memoStack.pop()
+  return res
+}

packages/runtime-vapor/src/renderEffect.ts

@@ -12,6 +12,7 @@ import {
   queuePostFlushCb,
 } from './scheduler'
 import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
+import { memoStack } from './memo'
 
 export function renderEffect(cb: () => void): void {
   const instance = getCurrentInstance()
@@ -32,6 +33,13 @@ export function renderEffect(cb: () => void): void {
     job.id = instance.uid
   }
 
+  let memos: (() => any[])[] | undefined
+  let memoCaches: any[][]
+  if (memoStack.length) {
+    memos = Array.from(memoStack)
+    memoCaches = memos.map(memo => memo())
+  }
+
   const effect = new ReactiveEffect(() =>
     callWithAsyncErrorHandling(cb, instance, VaporErrorCodes.RENDER_FUNCTION),
   )
@@ -52,6 +60,28 @@ export function renderEffect(cb: () => void): void {
       return
     }
 
+    if (memos) {
+      let dirty: boolean | undefined
+      for (let i = 0; i < memos.length; i++) {
+        const memo = memos[i]
+        const cache = memoCaches[i]
+        const value = memo()
+
+        for (let j = 0; j < Math.max(value.length, cache.length); j++) {
+          if (value[j] !== cache[j]) {
+            dirty = true
+            break
+          }
+        }
+
+        memoCaches[i] = value
+      }
+
+      if (!dirty) {
+        return
+      }
+    }
+
     const reset = instance && setCurrentInstance(instance)
 
     if (instance && instance.isMounted && !instance.isUpdating) {

playground/src/for-memo.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+
+const arr = reactive(['foo', 'bar', 'baz', 'qux'])
+const selected = ref('foo')
+</script>
+
+<template>
+  <div
+    v-for="item of arr"
+    v-memo="[selected === item]"
+    :class="{ danger: selected === item }"
+    @click="selected = item"
+  >
+    {{ item }}
+  </div>
+</template>
+
+<style>
+.danger {
+  color: red;
+}
+</style>