feat(runtime): lifecycle beforeUpdate and Updated hooks

Author: LittleSound

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

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,14 +111,15 @@ 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)
     }
   }
 }
 
 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()
 }

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,
+      )
+    }
+  }
+}

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()
 }

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>