feat(reactivity): new effectScope API (#2195)

packages/reactivity/src/effect.ts

@@ -1,5 +1,6 @@
 import { TrackOpTypes, TriggerOpTypes } from './operations'
 import { extend, isArray, isIntegerKey, isMap } from '@vue/shared'
+import { EffectScope, recordEffectScope } from './effectScope'
 
 // The main WeakMap that stores {target -> key -> dep} connections.
 // Conceptually, it's easier to think of a dependency as a Dep class
@@ -43,9 +44,12 @@ export class ReactiveEffect<T = any> {
   constructor(
     public fn: () => T,
     public scheduler: EffectScheduler | null = null,
+    scope?: EffectScope | null,
     // allow recursive self-invocation
     public allowRecurse = false
-  ) {}
+  ) {
+    recordEffectScope(this, scope)
+  }
 
   run() {
     if (!this.active) {
@@ -60,8 +64,7 @@ export class ReactiveEffect<T = any> {
       } finally {
         effectStack.pop()
         resetTracking()
-        const n = effectStack.length
-        activeEffect = n > 0 ? effectStack[n - 1] : undefined
+        activeEffect = effectStack[effectStack.length - 1]
       }
     }
   }
@@ -90,6 +93,7 @@ export class ReactiveEffect<T = any> {
 export interface ReactiveEffectOptions {
   lazy?: boolean
   scheduler?: EffectScheduler
+  scope?: EffectScope
   allowRecurse?: boolean
   onStop?: () => void
   onTrack?: (event: DebuggerEvent) => void
@@ -112,6 +116,7 @@ export function effect<T = any>(
   const _effect = new ReactiveEffect(fn)
   if (options) {
     extend(_effect, options)
+    if (options.scope) recordEffectScope(_effect, options.scope)
   }
   if (!options || !options.lazy) {
     _effect.run()

packages/reactivity/src/effectScope.ts

@@ -0,0 +1,81 @@
+import { ReactiveEffect } from './effect'
+import { warn } from './warning'
+
+let activeEffectScope: EffectScope | undefined
+const effectScopeStack: EffectScope[] = []
+
+export class EffectScope {
+  active = true
+  effects: (ReactiveEffect | EffectScope)[] = []
+  cleanups: (() => void)[] = []
+
+  constructor(detached = false) {
+    if (!detached) {
+      recordEffectScope(this)
+    }
+  }
+
+  run<T>(fn: () => T): T | undefined {
+    if (this.active) {
+      try {
+        this.on()
+        return fn()
+      } finally {
+        this.off()
+      }
+    } else if (__DEV__) {
+      warn(`cannot run an inactive effect scope.`)
+    }
+  }
+
+  on() {
+    if (this.active) {
+      effectScopeStack.push(this)
+      activeEffectScope = this
+    }
+  }
+
+  off() {
+    if (this.active) {
+      effectScopeStack.pop()
+      activeEffectScope = effectScopeStack[effectScopeStack.length - 1]
+    }
+  }
+
+  stop() {
+    if (this.active) {
+      this.effects.forEach(e => e.stop())
+      this.cleanups.forEach(cleanup => cleanup())
+      this.active = false
+    }
+  }
+}
+
+export function effectScope(detached?: boolean) {
+  return new EffectScope(detached)
+}
+
+export function recordEffectScope(
+  effect: ReactiveEffect | EffectScope,
+  scope?: EffectScope | null
+) {
+  scope = scope || activeEffectScope
+  if (scope && scope.active) {
+    scope.effects.push(effect)
+  }
+}
+
+export function getCurrentScope() {
+  return activeEffectScope
+}
+
+export function onScopeDispose(fn: () => void) {
+  if (activeEffectScope) {
+    activeEffectScope.cleanups.push(fn)
+  } else if (__DEV__) {
+    warn(
+      `onDispose() is called when there is no active effect scope ` +
+        ` to be associated with.`
+    )
+  }
+}

packages/reactivity/src/index.ts

@@ -51,4 +51,10 @@ export {
   EffectScheduler,
   DebuggerEvent
 } from './effect'
+export {
+  effectScope,
+  EffectScope,
+  getCurrentScope,
+  onScopeDispose
+} from './effectScope'
 export { TrackOpTypes, TriggerOpTypes } from './operations'

packages/reactivity/src/warning.ts

@@ -0,0 +1,3 @@
+export function warn(msg: string, ...args: any[]) {
+  console.warn(`[Vue warn] ${msg}`, ...args)
+}