From 5d65a83f2efb6cddf619d806f7b5c1a21c4cb32c Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Mon, 8 Jan 2024 01:19:23 +0800
Subject: [PATCH 01/10] feat(runtime): lifecycle beforeUpdate and Updated hooks

---
 packages/runtime-vapor/src/component.ts   |  2 +
 packages/runtime-vapor/src/directive.ts   | 23 +++---
 packages/runtime-vapor/src/renderWatch.ts | 89 +++++++++++++++++++++--
 packages/runtime-vapor/src/scheduler.ts   | 26 ++++---
 playground/src/App.vue                    | 16 +++-
 5 files changed, 132 insertions(+), 24 deletions(-)

diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index d1e5723f2..a181e7a47 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -47,6 +47,7 @@ export interface ComponentInternalInstance {
   // lifecycle
   get isMounted(): boolean
   get isUnmounted(): boolean
+  isUpdating: boolean
   isUnmountedRef: Ref<boolean>
   isMountedRef: Ref<boolean>
   // TODO: registory of provides, lifecycles, ...
@@ -155,6 +156,7 @@ export const createComponentInstance = (
     get isUnmounted() {
       return isUnmountedRef.value
     },
+    isUpdating: false,
     isMountedRef,
     isUnmountedRef,
     // TODO: registory of provides, appContext, lifecycles, ...
diff --git a/packages/runtime-vapor/src/directive.ts b/packages/runtime-vapor/src/directive.ts
index f59ce6a14..a13f461a2 100644
--- a/packages/runtime-vapor/src/directive.ts
+++ b/packages/runtime-vapor/src/directive.ts
@@ -1,6 +1,8 @@
 import { isFunction } from '@vue/shared'
 import { type ComponentInternalInstance, currentInstance } from './component'
 import { watchEffect } from './apiWatch'
+import { pauseTracking, resetTracking } from '@vue/reactivity'
+import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 
 export type DirectiveModifiers<M extends string = string> = Record<M, boolean>
 
@@ -27,7 +29,7 @@ export type DirectiveHookName =
   | 'created'
   | 'beforeMount'
   | 'mounted'
-  // | 'beforeUpdate'
+  | 'beforeUpdate'
   | 'updated'
   | 'beforeUnmount'
   | 'unmounted'
@@ -93,12 +95,7 @@ export function withDirectives<T extends Node>(
     }
     bindings.push(binding)
 
-    callDirectiveHook(node, binding, 'created')
-
-    watchEffect(() => {
-      if (!instance.isMountedRef.value) return
-      callDirectiveHook(node, binding, 'updated')
-    })
+    callDirectiveHook(node, binding, instance, 'created')
   }
 
   return node
@@ -114,7 +111,7 @@ export function invokeDirectiveHook(
   for (const node of nodes) {
     const directives = instance.dirs.get(node) || []
     for (const binding of directives) {
-      callDirectiveHook(node, binding, name)
+      callDirectiveHook(node, binding, instance, name)
     }
   }
 }
@@ -122,6 +119,7 @@ export function invokeDirectiveHook(
 function callDirectiveHook(
   node: Node,
   binding: DirectiveBinding,
+  instance: ComponentInternalInstance | null,
   name: DirectiveHookName,
 ) {
   const { dir } = binding
@@ -133,5 +131,12 @@ function callDirectiveHook(
 
   binding.oldValue = binding.value
   binding.value = newValue
-  hook(node, binding)
+  // disable tracking inside all lifecycle hooks
+  // since they can potentially be called inside effects.
+  pauseTracking()
+  callWithAsyncErrorHandling(hook, instance, VaporErrorCodes.DIRECTIVE_HOOK, [
+    node,
+    binding,
+  ])
+  resetTracking()
 }
diff --git a/packages/runtime-vapor/src/renderWatch.ts b/packages/runtime-vapor/src/renderWatch.ts
index fd9385fc5..c7ca26fad 100644
--- a/packages/runtime-vapor/src/renderWatch.ts
+++ b/packages/runtime-vapor/src/renderWatch.ts
@@ -1,14 +1,21 @@
 import {
-  type BaseWatchErrorCodes,
+  BaseWatchErrorCodes,
   type BaseWatchOptions,
   baseWatch,
   getCurrentScope,
 } from '@vue/reactivity'
-import { NOOP, remove } from '@vue/shared'
+import { NOOP, invokeArrayFns, remove } from '@vue/shared'
 import { currentInstance } from './component'
-import { createVaporRenderingScheduler } from './scheduler'
-import { handleError as handleErrorWithInstance } from './errorHandling'
+import {
+  createVaporRenderingScheduler,
+  queuePostRenderEffect,
+} from './scheduler'
+import {
+  callWithAsyncErrorHandling,
+  handleError as handleErrorWithInstance,
+} from './errorHandling'
 import { warn } from './warning'
+import { invokeDirectiveHook } from './directive'
 
 type WatchStopHandle = () => void
 
@@ -33,11 +40,31 @@ function doWatch(source: any, cb?: any): WatchStopHandle {
   // TODO: SSR
   // if (__SSR__) {}
 
+  if (__DEV__ && !currentInstance) {
+    warn(
+      `${cb ? 'renderWatch' : 'renderEffect'}()` +
+        ' is an internal API and it can only be used inside render()',
+    )
+  }
+
+  if (cb) {
+    // watch
+    cb = wrapEffectCallback(cb)
+  } else {
+    // effect
+    source = wrapEffectCallback(source)
+  }
+
   const instance =
     getCurrentScope() === currentInstance?.scope ? currentInstance : null
 
-  extendOptions.onError = (err: unknown, type: BaseWatchErrorCodes) =>
+  extendOptions.onError = (err: unknown, type: BaseWatchErrorCodes) => {
+    // callback error handling is in wrapEffectCallback
+    if (type === BaseWatchErrorCodes.WATCH_CALLBACK) {
+      throw err
+    }
     handleErrorWithInstance(err, instance, type)
+  }
   extendOptions.scheduler = createVaporRenderingScheduler(instance)
 
   let effect = baseWatch(source, cb, extendOptions)
@@ -53,3 +80,55 @@ function doWatch(source: any, cb?: any): WatchStopHandle {
 
   return unwatch
 }
+
+function wrapEffectCallback(callback: (...args: any[]) => any): Function {
+  const instance = currentInstance!
+
+  return (...args: any[]) => {
+    // with lifecycle
+    if (instance.isMounted) {
+      const { bu, u, dirs } = instance
+      // currentInstance.updating = true
+      // beforeUpdate hook
+      const isFirstEffect = !instance.isUpdating
+      if (isFirstEffect) {
+        if (bu) {
+          invokeArrayFns(bu)
+        }
+        if (dirs) {
+          invokeDirectiveHook(instance, 'beforeUpdate')
+        }
+        instance.isUpdating = true
+      }
+
+      // run callback
+      callWithAsyncErrorHandling(
+        callback,
+        instance,
+        BaseWatchErrorCodes.WATCH_CALLBACK,
+        args,
+      )
+
+      if (isFirstEffect) {
+        if (dirs) {
+          queuePostRenderEffect(() => {
+            instance.isUpdating = false
+            invokeDirectiveHook(instance, 'updated')
+          })
+        }
+        // updated hook
+        if (u) {
+          queuePostRenderEffect(u)
+        }
+      }
+    } else {
+      // is not mounted
+      callWithAsyncErrorHandling(
+        callback,
+        instance,
+        BaseWatchErrorCodes.WATCH_CALLBACK,
+        args,
+      )
+    }
+  }
+}
diff --git a/packages/runtime-vapor/src/scheduler.ts b/packages/runtime-vapor/src/scheduler.ts
index 2be470254..7a5afb011 100644
--- a/packages/runtime-vapor/src/scheduler.ts
+++ b/packages/runtime-vapor/src/scheduler.ts
@@ -1,5 +1,6 @@
 import type { Scheduler } from '@vue/reactivity'
 import type { ComponentInternalInstance } from './component'
+import { isArray } from '@vue/shared'
 
 export interface SchedulerJob extends Function {
   id?: number
@@ -73,15 +74,22 @@ function queueJob(job: SchedulerJob) {
   }
 }
 
-export function queuePostRenderEffect(cb: SchedulerJob) {
-  if (
-    !activePostFlushCbs ||
-    !activePostFlushCbs.includes(
-      cb,
-      cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex,
-    )
-  ) {
-    pendingPostFlushCbs.push(cb)
+export function queuePostRenderEffect(cb: SchedulerJobs) {
+  if (!isArray(cb)) {
+    if (
+      !activePostFlushCbs ||
+      !activePostFlushCbs.includes(
+        cb,
+        cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex,
+      )
+    ) {
+      pendingPostFlushCbs.push(cb)
+    }
+  } else {
+    // if cb is an array, it is a component lifecycle hook which can only be
+    // triggered by a job, which is already deduped in the main queue, so
+    // we can skip duplicate check here to improve perf
+    pendingPostFlushCbs.push(...cb)
   }
   queueFlush()
 }
diff --git a/playground/src/App.vue b/playground/src/App.vue
index f7c7a681d..070e727a6 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -5,6 +5,8 @@ import {
   onMounted,
   onBeforeMount,
   getCurrentInstance,
+  onBeforeUpdate,
+  onUpdated,
 } from 'vue/vapor'
 
 const instance = getCurrentInstance()!
@@ -26,12 +28,24 @@ onMounted(() => {
     count.value++
   }, 1000)
 })
+
+onBeforeUpdate(() => {
+  console.log('before updated')
+})
+onUpdated(() => {
+  console.log('updated')
+})
+
+const log = (arg: any) => {
+  console.log('callback in render effect')
+  return arg
+}
 </script>
 
 <template>
   <div>
     <h1 class="red">Counter</h1>
-    <div>The number is {{ count }}.</div>
+    <div>The number is {{ log(count) }}.</div>
     <div>{{ count }} * 2 = {{ double }}</div>
     <div style="display: flex; gap: 8px">
       <button @click="inc">inc</button>

From a2c9fbc7ec55b1567d4b17a4e343f5c8c1d13847 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Mon, 8 Jan 2024 01:31:40 +0800
Subject: [PATCH 02/10] fix: restore the updating status

---
 packages/runtime-vapor/src/renderWatch.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/runtime-vapor/src/renderWatch.ts b/packages/runtime-vapor/src/renderWatch.ts
index c7ca26fad..2334366f9 100644
--- a/packages/runtime-vapor/src/renderWatch.ts
+++ b/packages/runtime-vapor/src/renderWatch.ts
@@ -110,16 +110,16 @@ function wrapEffectCallback(callback: (...args: any[]) => any): Function {
       )
 
       if (isFirstEffect) {
-        if (dirs) {
-          queuePostRenderEffect(() => {
-            instance.isUpdating = false
+        queuePostRenderEffect(() => {
+          instance.isUpdating = false
+          if (dirs) {
             invokeDirectiveHook(instance, 'updated')
-          })
-        }
-        // updated hook
-        if (u) {
-          queuePostRenderEffect(u)
-        }
+          }
+          // updated hook
+          if (u) {
+            queuePostRenderEffect(u)
+          }
+        })
       }
     } else {
       // is not mounted

From e965a6c0d0306bd9df06ff2cf7077b70959c0414 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Mon, 8 Jan 2024 12:24:53 +0800
Subject: [PATCH 03/10] fix: life cycle state should not be reactivity

---
 packages/runtime-vapor/src/component.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index a181e7a47..ab2e49c3a 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -1,4 +1,10 @@
-import { EffectScope, type Ref, ref } from '@vue/reactivity'
+import {
+  EffectScope,
+  type Ref,
+  pauseTracking,
+  ref,
+  resetTracking,
+} from '@vue/reactivity'
 
 import { EMPTY_OBJ } from '@vue/shared'
 import type { Block } from './render'
@@ -151,10 +157,16 @@ export const createComponentInstance = (
 
     // lifecycle
     get isMounted() {
-      return isMountedRef.value
+      pauseTracking()
+      const value = isMountedRef.value
+      resetTracking()
+      return value
     },
     get isUnmounted() {
-      return isUnmountedRef.value
+      pauseTracking()
+      const value = isUnmountedRef.value
+      resetTracking()
+      return value
     },
     isUpdating: false,
     isMountedRef,

From aefe450a6b5e9e95893c7cd582d12cac9c994bb7 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Tue, 9 Jan 2024 18:50:31 +0800
Subject: [PATCH 04/10] fix: unit test for v-show

---
 packages/runtime-vapor/src/directive.ts   | 9 +++++++--
 packages/runtime-vapor/src/renderWatch.ts | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/runtime-vapor/src/directive.ts b/packages/runtime-vapor/src/directive.ts
index a13f461a2..6afed4f4d 100644
--- a/packages/runtime-vapor/src/directive.ts
+++ b/packages/runtime-vapor/src/directive.ts
@@ -1,8 +1,8 @@
-import { isFunction } from '@vue/shared'
+import { NOOP, isFunction } from '@vue/shared'
 import { type ComponentInternalInstance, currentInstance } from './component'
-import { watchEffect } from './apiWatch'
 import { pauseTracking, resetTracking } from '@vue/reactivity'
 import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
+import { renderWatch } from './renderWatch'
 
 export type DirectiveModifiers<M extends string = string> = Record<M, boolean>
 
@@ -96,6 +96,11 @@ export function withDirectives<T extends Node>(
     bindings.push(binding)
 
     callDirectiveHook(node, binding, instance, 'created')
+
+    // register source
+    if (source) {
+      renderWatch(source, NOOP)
+    }
   }
 
   return node
diff --git a/packages/runtime-vapor/src/renderWatch.ts b/packages/runtime-vapor/src/renderWatch.ts
index 2334366f9..63136cc02 100644
--- a/packages/runtime-vapor/src/renderWatch.ts
+++ b/packages/runtime-vapor/src/renderWatch.ts
@@ -82,11 +82,11 @@ function doWatch(source: any, cb?: any): WatchStopHandle {
 }
 
 function wrapEffectCallback(callback: (...args: any[]) => any): Function {
-  const instance = currentInstance!
+  const instance = currentInstance
 
   return (...args: any[]) => {
     // with lifecycle
-    if (instance.isMounted) {
+    if (instance && instance.isMounted) {
       const { bu, u, dirs } = instance
       // currentInstance.updating = true
       // beforeUpdate hook

From 764b95a4ac11050baf091d35380e09a64460fb16 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Tue, 9 Jan 2024 18:53:11 +0800
Subject: [PATCH 05/10] fix: unit test for render watch

---
 packages/runtime-vapor/src/renderWatch.ts | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/runtime-vapor/src/renderWatch.ts b/packages/runtime-vapor/src/renderWatch.ts
index 63136cc02..1d5d414d0 100644
--- a/packages/runtime-vapor/src/renderWatch.ts
+++ b/packages/runtime-vapor/src/renderWatch.ts
@@ -36,17 +36,19 @@ function doWatch(source: any, cb?: any): WatchStopHandle {
   if (__DEV__) extendOptions.onWarn = warn
 
   // TODO: Life Cycle Hooks
+  // - [] Base Implementation
+  // - [] Determine the trigger time of onCleanup
+  // - [] Unit Test
+
+  // trigger time:
+  // now: lastTimeCleanup -> beforeUpdate -> renderEffect -> updated
+  // future: beforeUpdate -> lastTimeCleanup -< renderEffect -> updated
+  // The most effective way to determine that is to find a test case that can persuade the adoption of a certain scheme.
+  // It should be guaranteed that there is no update operation on dom beforeUpdate, but the cleanup generally includes the operation on dom.
 
   // TODO: SSR
   // if (__SSR__) {}
 
-  if (__DEV__ && !currentInstance) {
-    warn(
-      `${cb ? 'renderWatch' : 'renderEffect'}()` +
-        ' is an internal API and it can only be used inside render()',
-    )
-  }
-
   if (cb) {
     // watch
     cb = wrapEffectCallback(cb)

From 4d439858dd513a0f66ebab4aa1b2bab91cc63f3b Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Tue, 9 Jan 2024 20:45:31 +0800
Subject: [PATCH 06/10] feat: middleware in baseWatch

---
 .../reactivity/__tests__/baseWatch.spec.ts    | 78 +++++++++++++++++++
 packages/reactivity/src/baseWatch.ts          | 62 +++++++++------
 packages/reactivity/src/index.ts              |  1 +
 3 files changed, 117 insertions(+), 24 deletions(-)

diff --git a/packages/reactivity/__tests__/baseWatch.spec.ts b/packages/reactivity/__tests__/baseWatch.spec.ts
index 02d9e64e0..0aab0aee6 100644
--- a/packages/reactivity/__tests__/baseWatch.spec.ts
+++ b/packages/reactivity/__tests__/baseWatch.spec.ts
@@ -175,4 +175,82 @@ describe('baseWatch', () => {
     scope.stop()
     expect(calls).toEqual(['sync 2', 'post 2'])
   })
+  test('baseWatch with middleware', async () => {
+    let effectCalls: string[] = []
+    let watchCalls: string[] = []
+    const source = ref(0)
+
+    // effect
+    baseWatch(
+      () => {
+        source.value
+        effectCalls.push('effect')
+        onEffectCleanup(() => effectCalls.push('effect cleanup'))
+      },
+      null,
+      {
+        scheduler,
+        middleware: next => {
+          effectCalls.push('before effect running')
+          next()
+          effectCalls.push('effect ran')
+        },
+      },
+    )
+    // watch
+    baseWatch(
+      () => source.value,
+      () => {
+        watchCalls.push('watch')
+        onEffectCleanup(() => watchCalls.push('watch cleanup'))
+      },
+      {
+        scheduler,
+        middleware: next => {
+          watchCalls.push('before watch running')
+          next()
+          watchCalls.push('watch ran')
+        },
+      },
+    )
+
+    expect(effectCalls).toEqual([])
+    expect(watchCalls).toEqual([])
+    await nextTick()
+    expect(effectCalls).toEqual([
+      'before effect running',
+      'effect',
+      'effect ran',
+    ])
+    expect(watchCalls).toEqual([])
+    effectCalls.length = 0
+    watchCalls.length = 0
+
+    source.value++
+    await nextTick()
+    expect(effectCalls).toEqual([
+      'before effect running',
+      'effect cleanup',
+      'effect',
+      'effect ran',
+    ])
+    expect(watchCalls).toEqual(['before watch running', 'watch', 'watch ran'])
+    effectCalls.length = 0
+    watchCalls.length = 0
+
+    source.value++
+    await nextTick()
+    expect(effectCalls).toEqual([
+      'before effect running',
+      'effect cleanup',
+      'effect',
+      'effect ran',
+    ])
+    expect(watchCalls).toEqual([
+      'before watch running',
+      'watch cleanup',
+      'watch',
+      'watch ran',
+    ])
+  })
 })
diff --git a/packages/reactivity/src/baseWatch.ts b/packages/reactivity/src/baseWatch.ts
index a97f43366..f6e20cfa5 100644
--- a/packages/reactivity/src/baseWatch.ts
+++ b/packages/reactivity/src/baseWatch.ts
@@ -71,6 +71,7 @@ export interface BaseWatchOptions<Immediate = boolean> extends DebuggerOptions {
   deep?: boolean
   once?: boolean
   scheduler?: Scheduler
+  middleware?: BaseWatchMiddleware
   onError?: HandleError
   onWarn?: HandleWarn
 }
@@ -83,6 +84,7 @@ export type Scheduler = (
   effect: ReactiveEffect,
   isInit: boolean,
 ) => void
+export type BaseWatchMiddleware = (next: () => unknown) => any
 export type HandleError = (err: unknown, type: BaseWatchErrorCodes) => void
 export type HandleWarn = (msg: string, ...args: any[]) => void
 
@@ -132,6 +134,7 @@ export function baseWatch(
     scheduler = DEFAULT_SCHEDULER,
     onWarn = __DEV__ ? warn : NOOP,
     onError = DEFAULT_HANDLE_ERROR,
+    middleware,
     onTrack,
     onTrigger,
   }: BaseWatchOptions = EMPTY_OBJ,
@@ -211,6 +214,10 @@ export function baseWatch(
           activeEffect = currentEffect
         }
       }
+      if (middleware) {
+        const baseGetter = getter
+        getter = () => middleware(baseGetter)
+      }
     }
   } else {
     getter = NOOP
@@ -264,31 +271,38 @@ export function baseWatch(
           ? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i]))
           : hasChanged(newValue, oldValue))
       ) {
-        // cleanup before running cb again
-        if (cleanup) {
-          cleanup()
+        const next = () => {
+          // cleanup before running cb again
+          if (cleanup) {
+            cleanup()
+          }
+          const currentEffect = activeEffect
+          activeEffect = effect
+          try {
+            callWithAsyncErrorHandling(
+              cb!,
+              onError,
+              BaseWatchErrorCodes.WATCH_CALLBACK,
+              [
+                newValue,
+                // pass undefined as the old value when it's changed for the first time
+                oldValue === INITIAL_WATCHER_VALUE
+                  ? undefined
+                  : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE
+                    ? []
+                    : oldValue,
+                onEffectCleanup,
+              ],
+            )
+            oldValue = newValue
+          } finally {
+            activeEffect = currentEffect
+          }
         }
-        const currentEffect = activeEffect
-        activeEffect = effect
-        try {
-          callWithAsyncErrorHandling(
-            cb,
-            onError,
-            BaseWatchErrorCodes.WATCH_CALLBACK,
-            [
-              newValue,
-              // pass undefined as the old value when it's changed for the first time
-              oldValue === INITIAL_WATCHER_VALUE
-                ? undefined
-                : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE
-                  ? []
-                  : oldValue,
-              onEffectCleanup,
-            ],
-          )
-          oldValue = newValue
-        } finally {
-          activeEffect = currentEffect
+        if (middleware) {
+          middleware(next)
+        } else {
+          next()
         }
       }
     } else {
diff --git a/packages/reactivity/src/index.ts b/packages/reactivity/src/index.ts
index 8fe9c18c6..88ef249e4 100644
--- a/packages/reactivity/src/index.ts
+++ b/packages/reactivity/src/index.ts
@@ -76,5 +76,6 @@ export {
   traverse,
   BaseWatchErrorCodes,
   type BaseWatchOptions,
+  type BaseWatchMiddleware,
   type Scheduler,
 } from './baseWatch'

From 63f29498ae3e09064388f244678ab07460c68245 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Tue, 9 Jan 2024 20:48:18 +0800
Subject: [PATCH 07/10] fix: cleanup should trigger time after beforeUpdate

---
 .../__tests__/renderWatch.spec.ts             | 11 ++++
 packages/runtime-vapor/src/renderWatch.ts     | 59 ++++++-------------
 2 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/packages/runtime-vapor/__tests__/renderWatch.spec.ts b/packages/runtime-vapor/__tests__/renderWatch.spec.ts
index 0d43ad90f..3db01db76 100644
--- a/packages/runtime-vapor/__tests__/renderWatch.spec.ts
+++ b/packages/runtime-vapor/__tests__/renderWatch.spec.ts
@@ -1,7 +1,9 @@
 import { defineComponent } from 'vue'
 import {
   nextTick,
+  onBeforeUpdate,
   onEffectCleanup,
+  onUpdated,
   ref,
   render,
   renderEffect,
@@ -63,6 +65,13 @@ describe('renderWatch', () => {
         const change = () => source.value++
         const changeRender = () => renderSource.value++
 
+        onUpdated(() => {
+          calls.push(`updated ${source.value}`)
+        })
+        onBeforeUpdate(() => {
+          calls.push(`beforeUpdate ${source.value}`)
+        })
+
         watchPostEffect(() => {
           const current = source.value
           calls.push(`post ${current}`)
@@ -123,11 +132,13 @@ describe('renderWatch', () => {
     expect(calls).toEqual([
       'pre cleanup 0',
       'pre 1',
+      'beforeUpdate 1',
       'renderEffect cleanup 0',
       'renderEffect 1',
       'renderWatch 1',
       'post cleanup 0',
       'post 1',
+      'updated 1',
     ])
   })
 })
diff --git a/packages/runtime-vapor/src/renderWatch.ts b/packages/runtime-vapor/src/renderWatch.ts
index 1d5d414d0..f807bcc54 100644
--- a/packages/runtime-vapor/src/renderWatch.ts
+++ b/packages/runtime-vapor/src/renderWatch.ts
@@ -1,19 +1,17 @@
 import {
-  BaseWatchErrorCodes,
+  type BaseWatchErrorCodes,
+  type BaseWatchMiddleware,
   type BaseWatchOptions,
   baseWatch,
   getCurrentScope,
 } from '@vue/reactivity'
 import { NOOP, invokeArrayFns, remove } from '@vue/shared'
-import { currentInstance } from './component'
+import { type ComponentInternalInstance, currentInstance } from './component'
 import {
   createVaporRenderingScheduler,
   queuePostRenderEffect,
 } from './scheduler'
-import {
-  callWithAsyncErrorHandling,
-  handleError as handleErrorWithInstance,
-} from './errorHandling'
+import { handleError as handleErrorWithInstance } from './errorHandling'
 import { warn } from './warning'
 import { invokeDirectiveHook } from './directive'
 
@@ -36,9 +34,12 @@ function doWatch(source: any, cb?: any): WatchStopHandle {
   if (__DEV__) extendOptions.onWarn = warn
 
   // TODO: Life Cycle Hooks
-  // - [] Base Implementation
-  // - [] Determine the trigger time of onCleanup
+  // - [x] fix v-show unit test
+  // - [x] Base Implementation
+  // - [x] Determine the trigger time of onCleanup
+  // - [x] Implement onCleanup trigger time after beforeUpdate
   // - [] Unit Test
+  //   - [] Unit Test for error
 
   // trigger time:
   // now: lastTimeCleanup -> beforeUpdate -> renderEffect -> updated
@@ -49,26 +50,15 @@ function doWatch(source: any, cb?: any): WatchStopHandle {
   // TODO: SSR
   // if (__SSR__) {}
 
-  if (cb) {
-    // watch
-    cb = wrapEffectCallback(cb)
-  } else {
-    // effect
-    source = wrapEffectCallback(source)
-  }
-
   const instance =
     getCurrentScope() === currentInstance?.scope ? currentInstance : null
 
-  extendOptions.onError = (err: unknown, type: BaseWatchErrorCodes) => {
-    // callback error handling is in wrapEffectCallback
-    if (type === BaseWatchErrorCodes.WATCH_CALLBACK) {
-      throw err
-    }
+  extendOptions.onError = (err: unknown, type: BaseWatchErrorCodes) =>
     handleErrorWithInstance(err, instance, type)
-  }
   extendOptions.scheduler = createVaporRenderingScheduler(instance)
 
+  extendOptions.middleware = createMiddleware(instance)
+
   let effect = baseWatch(source, cb, extendOptions)
 
   const unwatch = !effect
@@ -83,14 +73,13 @@ function doWatch(source: any, cb?: any): WatchStopHandle {
   return unwatch
 }
 
-function wrapEffectCallback(callback: (...args: any[]) => any): Function {
-  const instance = currentInstance
-
-  return (...args: any[]) => {
+const createMiddleware =
+  (instance: ComponentInternalInstance | null): BaseWatchMiddleware =>
+  (next) => {
+    let value: unknown
     // with lifecycle
     if (instance && instance.isMounted) {
       const { bu, u, dirs } = instance
-      // currentInstance.updating = true
       // beforeUpdate hook
       const isFirstEffect = !instance.isUpdating
       if (isFirstEffect) {
@@ -104,12 +93,7 @@ function wrapEffectCallback(callback: (...args: any[]) => any): Function {
       }
 
       // run callback
-      callWithAsyncErrorHandling(
-        callback,
-        instance,
-        BaseWatchErrorCodes.WATCH_CALLBACK,
-        args,
-      )
+      value = next()
 
       if (isFirstEffect) {
         queuePostRenderEffect(() => {
@@ -125,12 +109,7 @@ function wrapEffectCallback(callback: (...args: any[]) => any): Function {
       }
     } else {
       // is not mounted
-      callWithAsyncErrorHandling(
-        callback,
-        instance,
-        BaseWatchErrorCodes.WATCH_CALLBACK,
-        args,
-      )
+      value = next()
     }
+    return value
   }
-}

From 13914b51b9e15482dfc25c3e3985d44742e7f927 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Tue, 9 Jan 2024 22:39:55 +0800
Subject: [PATCH 08/10] test: errors should include the execution location with
 lifecycle hooks

---
 .../__tests__/renderWatch.spec.ts             | 137 ++++++++++++++----
 packages/runtime-vapor/src/renderWatch.ts     |  14 --
 2 files changed, 110 insertions(+), 41 deletions(-)

diff --git a/packages/runtime-vapor/__tests__/renderWatch.spec.ts b/packages/runtime-vapor/__tests__/renderWatch.spec.ts
index 3db01db76..9a48df5c5 100644
--- a/packages/runtime-vapor/__tests__/renderWatch.spec.ts
+++ b/packages/runtime-vapor/__tests__/renderWatch.spec.ts
@@ -27,6 +27,27 @@ beforeEach(() => {
 afterEach(() => {
   host.remove()
 })
+const createDemo = (
+  setupFn: (porps: any, ctx: any) => any,
+  renderFn: (ctx: any) => any,
+) => {
+  const demo = defineComponent({
+    setup(...args) {
+      const returned = setupFn(...args)
+      Object.defineProperty(returned, '__isScriptSetup', {
+        enumerable: false,
+        value: true,
+      })
+      return returned
+    },
+  })
+  demo.render = (ctx: any) => {
+    const t0 = template('<div></div>')
+    renderFn(ctx)
+    return t0()
+  }
+  return () => render(demo as any, {}, '#host')
+}
 
 describe('renderWatch', () => {
   test('effect', async () => {
@@ -55,16 +76,18 @@ describe('renderWatch', () => {
     expect(dummy).toBe(1)
   })
 
-  test('scheduling order', async () => {
+  test('should run with the scheduling order', async () => {
     const calls: string[] = []
 
-    const demo = defineComponent({
-      setup() {
+    const mount = createDemo(
+      () => {
+        // setup
         const source = ref(0)
         const renderSource = ref(0)
         const change = () => source.value++
         const changeRender = () => renderSource.value++
 
+        // Life Cycle Hooks
         onUpdated(() => {
           calls.push(`updated ${source.value}`)
         })
@@ -72,6 +95,7 @@ describe('renderWatch', () => {
           calls.push(`beforeUpdate ${source.value}`)
         })
 
+        // Watch API
         watchPostEffect(() => {
           const current = source.value
           calls.push(`post ${current}`)
@@ -87,33 +111,28 @@ describe('renderWatch', () => {
           calls.push(`sync ${current}`)
           onEffectCleanup(() => calls.push(`sync cleanup ${current}`))
         })
-        const __returned__ = { source, change, renderSource, changeRender }
-        Object.defineProperty(__returned__, '__isScriptSetup', {
-          enumerable: false,
-          value: true,
+        return { source, change, renderSource, changeRender }
+      },
+      // render
+      (_ctx) => {
+        // Render Watch API
+        renderEffect(() => {
+          const current = _ctx.renderSource
+          calls.push(`renderEffect ${current}`)
+          onEffectCleanup(() => calls.push(`renderEffect cleanup ${current}`))
         })
-        return __returned__
+        renderWatch(
+          () => _ctx.renderSource,
+          (value) => {
+            calls.push(`renderWatch ${value}`)
+            onEffectCleanup(() => calls.push(`renderWatch cleanup ${value}`))
+          },
+        )
       },
-    })
+    )
 
-    demo.render = (_ctx: any) => {
-      const t0 = template('<div></div>')
-      renderEffect(() => {
-        const current = _ctx.renderSource
-        calls.push(`renderEffect ${current}`)
-        onEffectCleanup(() => calls.push(`renderEffect cleanup ${current}`))
-      })
-      renderWatch(
-        () => _ctx.renderSource,
-        (value) => {
-          calls.push(`renderWatch ${value}`)
-          onEffectCleanup(() => calls.push(`renderWatch cleanup ${value}`))
-        },
-      )
-      return t0()
-    }
-
-    const instance = render(demo as any, {}, '#host')
+    // Mount
+    const instance = mount()
     const { change, changeRender } = instance.setupState as any
 
     expect(calls).toEqual(['pre 0', 'sync 0', 'renderEffect 0'])
@@ -123,8 +142,10 @@ describe('renderWatch', () => {
     expect(calls).toEqual(['post 0'])
     calls.length = 0
 
+    // Update
     changeRender()
     change()
+
     expect(calls).toEqual(['sync cleanup 0', 'sync 1'])
     calls.length = 0
 
@@ -141,4 +162,66 @@ describe('renderWatch', () => {
       'updated 1',
     ])
   })
+
+  test('errors should include the execution location with beforeUpdate hook', async () => {
+    const mount = createDemo(
+      // setup
+      () => {
+        const source = ref()
+        const update = () => source.value++
+        onBeforeUpdate(() => {
+          throw 'error in beforeUpdate'
+        })
+        return { source, update }
+      },
+      // render
+      (ctx) => {
+        renderEffect(() => {
+          ctx.source
+        })
+      },
+    )
+
+    const instance = mount()
+    const { update } = instance.setupState as any
+    await expect(async () => {
+      update()
+      await nextTick()
+    }).rejects.toThrow('error in beforeUpdate')
+
+    expect(
+      '[Vue warn] Unhandled error during execution of beforeUpdate hook',
+    ).toHaveBeenWarned()
+  })
+
+  test('errors should include the execution location with updated hook', async () => {
+    const mount = createDemo(
+      // setup
+      () => {
+        const source = ref(0)
+        const update = () => source.value++
+        onUpdated(() => {
+          throw 'error in updated'
+        })
+        return { source, update }
+      },
+      // render
+      (ctx) => {
+        renderEffect(() => {
+          ctx.source
+        })
+      },
+    )
+
+    const instance = mount()
+    const { update } = instance.setupState as any
+    await expect(async () => {
+      update()
+      await nextTick()
+    }).rejects.toThrow('error in updated')
+
+    expect(
+      '[Vue warn] Unhandled error during execution of updated',
+    ).toHaveBeenWarned()
+  })
 })
diff --git a/packages/runtime-vapor/src/renderWatch.ts b/packages/runtime-vapor/src/renderWatch.ts
index f807bcc54..e5103d716 100644
--- a/packages/runtime-vapor/src/renderWatch.ts
+++ b/packages/runtime-vapor/src/renderWatch.ts
@@ -33,20 +33,6 @@ function doWatch(source: any, cb?: any): WatchStopHandle {
 
   if (__DEV__) extendOptions.onWarn = warn
 
-  // TODO: Life Cycle Hooks
-  // - [x] fix v-show unit test
-  // - [x] Base Implementation
-  // - [x] Determine the trigger time of onCleanup
-  // - [x] Implement onCleanup trigger time after beforeUpdate
-  // - [] Unit Test
-  //   - [] Unit Test for error
-
-  // trigger time:
-  // now: lastTimeCleanup -> beforeUpdate -> renderEffect -> updated
-  // future: beforeUpdate -> lastTimeCleanup -< renderEffect -> updated
-  // The most effective way to determine that is to find a test case that can persuade the adoption of a certain scheme.
-  // It should be guaranteed that there is no update operation on dom beforeUpdate, but the cleanup generally includes the operation on dom.
-
   // TODO: SSR
   // if (__SSR__) {}
 

From 7e1c4d48b5997e2c799cfb3cbf9e95567b32af39 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Wed, 10 Jan 2024 22:17:25 +0800
Subject: [PATCH 09/10] fix: directive hook

---
 packages/runtime-vapor/src/directive.ts |  4 +---
 playground/src/directive.vue            | 25 ++++++++++++++++++-------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/runtime-vapor/src/directive.ts b/packages/runtime-vapor/src/directive.ts
index 6afed4f4d..ad6072b4f 100644
--- a/packages/runtime-vapor/src/directive.ts
+++ b/packages/runtime-vapor/src/directive.ts
@@ -132,9 +132,6 @@ function callDirectiveHook(
   if (!hook) return
 
   const newValue = binding.source ? binding.source() : undefined
-  if (name === 'updated' && binding.value === newValue) return
-
-  binding.oldValue = binding.value
   binding.value = newValue
   // disable tracking inside all lifecycle hooks
   // since they can potentially be called inside effects.
@@ -144,4 +141,5 @@ function callDirectiveHook(
     binding,
   ])
   resetTracking()
+  if (name !== 'beforeUpdate') binding.oldValue = binding.value
 }
diff --git a/playground/src/directive.vue b/playground/src/directive.vue
index 722801d59..087f653a1 100644
--- a/playground/src/directive.vue
+++ b/playground/src/directive.vue
@@ -2,6 +2,7 @@
 import { ObjectDirective, FunctionDirective, ref } from '@vue/vapor'
 
 const text = ref('created (overwrite by v-text), ')
+const counter = ref(0)
 const vDirective: ObjectDirective<HTMLDivElement, undefined> = {
   created(node) {
     if (!node.parentElement) {
@@ -17,9 +18,15 @@ const vDirective: ObjectDirective<HTMLDivElement, undefined> = {
   mounted(node) {
     if (node.parentElement) node.textContent += 'mounted, '
   },
+  beforeUpdate(node, binding) {
+    console.log('beforeUpdate', binding, node)
+  },
+  updated(node, binding) {
+    console.log('updated', binding, node)
+  },
 }
 const vDirectiveSimple: FunctionDirective<HTMLDivElement> = (node, binding) => {
-  console.log(node, binding)
+  console.log('v-directive-simple:', node, binding)
 }
 const handleClick = () => {
   text.value = 'change'
@@ -27,10 +34,14 @@ const handleClick = () => {
 </script>
 
 <template>
-  <div
-    v-directive:foo.bar="text"
-    v-text="text"
-    v-directive-simple="text"
-    @click="handleClick"
-  />
+  <div v-directive:foo.bar="text" v-text="text" v-directive-simple="text" @click="handleClick" />
+  <button @click="counter++">{{ counter }} (Click to Update Other Element)</button>
 </template>
+
+<style>
+html {
+  color-scheme: dark;
+  background-color: #000;
+  padding: 10px;
+}
+</style>

From 530eb9efe2d8efc7bb2626d7e5616f7401d717f8 Mon Sep 17 00:00:00 2001
From: Rizumu Ayaka <rizumu@ayaka.moe>
Date: Wed, 10 Jan 2024 22:33:54 +0800
Subject: [PATCH 10/10] style: fix prettier

---
 playground/src/directive.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/playground/src/directive.vue b/playground/src/directive.vue
index 087f653a1..8022b9db1 100644
--- a/playground/src/directive.vue
+++ b/playground/src/directive.vue
@@ -34,8 +34,15 @@ const handleClick = () => {
 </script>
 
 <template>
-  <div v-directive:foo.bar="text" v-text="text" v-directive-simple="text" @click="handleClick" />
-  <button @click="counter++">{{ counter }} (Click to Update Other Element)</button>
+  <div
+    v-directive:foo.bar="text"
+    v-text="text"
+    v-directive-simple="text"
+    @click="handleClick"
+  />
+  <button @click="counter++">
+    {{ counter }} (Click to Update Other Element)
+  </button>
 </template>
 
 <style>