fix: trigger componentUpdateFn twice when props updated

chibivue-land · Jan 16, 2024 · eaf6613 · eaf6613
1 parent 1f85233
commit eaf6613
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/book/impls/10_minimum_example/050_component_system2/packages/reactivity/effect.ts b/book/impls/10_minimum_example/050_component_system2/packages/reactivity/effect.ts
@@ -7,6 +7,7 @@ export let activeEffect: ReactiveEffect | undefined
 
 export class ReactiveEffect<T = any> {
   constructor(public fn: () => T) {}
+  allowRecurse?: boolean
 
   run() {
     let parent: ReactiveEffect | undefined = activeEffect
@@ -42,6 +43,9 @@ export function trigger(target: object, key?: unknown) {
   if (dep) {
     const effects = [...dep]
     for (const effect of effects) {
+      if (!effect.allowRecurse) {
+        continue
+      }
       effect.run()
     }
   }

diff --git a/book/impls/10_minimum_example/050_component_system2/packages/runtime-core/renderer.ts b/book/impls/10_minimum_example/050_component_system2/packages/runtime-core/renderer.ts
@@ -184,7 +184,9 @@ export function createRenderer(options: RendererOptions) {
           next.component = instance
           instance.vnode = next
           instance.next = null
+          toggleRecurse(instance, false)
           updateProps(instance, next.props)
+          toggleRecurse(instance, true)
         } else {
           next = vnode
         }
@@ -200,6 +202,7 @@ export function createRenderer(options: RendererOptions) {
 
     const effect = (instance.effect = new ReactiveEffect(componentUpdateFn))
     const update = (instance.update = () => effect.run())
+    toggleRecurse(instance, true)
     update()
   }
 
@@ -216,3 +219,10 @@ export function createRenderer(options: RendererOptions) {
 
   return { render }
 }
+
+function toggleRecurse(
+  { effect }: ComponentInternalInstance,
+  allowed: boolean,
+) {
+  effect.allowRecurse = allowed
+}