fix(hmr): refactor scope cleanup to use reset method for stale effects management

Author: edison1105

packages/reactivity/src/effectScope.ts

@@ -73,6 +73,17 @@ export class EffectScope implements ReactiveNode {
       return
     }
     this.flags = EffectFlags.STOP
+    this.reset()
+    const sub = this.subs
+    if (sub !== undefined) {
+      unlink(sub)
+    }
+  }
+
+  /**
+   * @internal
+   */
+  reset(): void {
     let dep = this.deps
     while (dep !== undefined) {
       const node = dep.dep
@@ -83,10 +94,6 @@ export class EffectScope implements ReactiveNode {
         dep = unlink(dep, this)
       }
     }
-    const sub = this.subs
-    if (sub !== undefined) {
-      unlink(sub)
-    }
     cleanup(this)
   }
 }

packages/runtime-vapor/src/component.ts

@@ -592,8 +592,7 @@ export class VaporComponentInstance<
   asyncDep: Promise<any> | null
   asyncResolved: boolean
 
-  // for HMR and vapor custom element
-  // all render effects associated with this instance
+  // for vapor custom element
   renderEffects?: RenderEffect[]
 
   hasFallthrough: boolean

packages/runtime-vapor/src/hmr.ts

@@ -19,12 +19,10 @@ export function hmrRerender(instance: VaporComponentInstance): void {
   const normalized = normalizeBlock(instance.block)
   const parent = normalized[0].parentNode!
   const anchor = normalized[normalized.length - 1].nextSibling
+  // reset scope to avoid stale effects
+  instance.scope.reset()
   remove(instance.block, parent)
   const prev = setCurrentInstance(instance)
-  if (instance.renderEffects) {
-    instance.renderEffects.forEach(e => e.stop())
-    instance.renderEffects = []
-  }
   pushWarningContext(instance)
   devRender(instance)
   popWarningContext()

packages/runtime-vapor/src/renderEffect.ts

@@ -44,8 +44,8 @@ export class RenderEffect extends ReactiveEffect {
           : void 0
       }
 
-      if (__DEV__ || instance.type.ce) {
-        // register effect for stopping them during HMR rerender
+      // register effect for vapor custom element update
+      if (instance.type.ce) {
         ;(instance.renderEffects || (instance.renderEffects = [])).push(this)
       }
       job.i = instance