Home / Class/ EffectScope Class — vue Architecture

EffectScope Class — vue Architecture

Architecture documentation for the EffectScope class in effectScope.ts from the vue codebase.

Entity Profile

Dependency Diagram

graph TD
  88c159e0_a17b_965d_b204_b7c3c59c6054["EffectScope"]
  3c2912c4_0eac_a88d_e983_87f8f7c62fb5["effectScope.ts"]
  88c159e0_a17b_965d_b204_b7c3c59c6054 -->|defined in| 3c2912c4_0eac_a88d_e983_87f8f7c62fb5
  bfa57543_a939_87fb_c778_b44926b9d222["constructor()"]
  88c159e0_a17b_965d_b204_b7c3c59c6054 -->|method| bfa57543_a939_87fb_c778_b44926b9d222
  7cec0c78_2a54_8d22_ac5d_877616db37e6["run()"]
  88c159e0_a17b_965d_b204_b7c3c59c6054 -->|method| 7cec0c78_2a54_8d22_ac5d_877616db37e6
  771027bf_10da_a0fc_b40f_80f10443460b["on()"]
  88c159e0_a17b_965d_b204_b7c3c59c6054 -->|method| 771027bf_10da_a0fc_b40f_80f10443460b
  1f573862_09fc_2574_0dad_1051fc5c7f66["off()"]
  88c159e0_a17b_965d_b204_b7c3c59c6054 -->|method| 1f573862_09fc_2574_0dad_1051fc5c7f66
  712bda8a_c56d_9028_e161_65e495fb47d1["stop()"]
  88c159e0_a17b_965d_b204_b7c3c59c6054 -->|method| 712bda8a_c56d_9028_e161_65e495fb47d1

Relationship Graph

Source Code

src/v3/reactivity/effectScope.ts lines 6–106

export class EffectScope {
  /**
   * @internal
   */
  active = true
  /**
   * @internal
   */
  effects: Watcher[] = []
  /**
   * @internal
   */
  cleanups: (() => void)[] = []
  /**
   * @internal
   */
  parent: EffectScope | undefined
  /**
   * record undetached scopes
   * @internal
   */
  scopes: EffectScope[] | undefined
  /**
   * indicates this being a component root scope
   * @internal
   */
  _vm?: boolean
  /**
   * track a child scope's index in its parent's scopes array for optimized
   * removal
   */
  private index: number | undefined

  constructor(public detached = false) {
    this.parent = activeEffectScope
    if (!detached && activeEffectScope) {
      this.index =
        (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
          this
        ) - 1
    }
  }

  run<T>(fn: () => T): T | undefined {
    if (this.active) {
      const currentEffectScope = activeEffectScope
      try {
        activeEffectScope = this
        return fn()
      } finally {
        activeEffectScope = currentEffectScope
      }
    } else if (__DEV__) {
      warn(`cannot run an inactive effect scope.`)
    }
  }

  /**
   * This should only be called on non-detached scopes
   * @internal
   */
  on() {
    activeEffectScope = this
  }

  /**
   * This should only be called on non-detached scopes
   * @internal
   */
  off() {
    activeEffectScope = this.parent
  }

  stop(fromParent?: boolean) {
    if (this.active) {
      let i, l
      for (i = 0, l = this.effects.length; i < l; i++) {
        this.effects[i].teardown()
      }
      for (i = 0, l = this.cleanups.length; i < l; i++) {
        this.cleanups[i]()

Frequently Asked Questions

What is the EffectScope class?
EffectScope is a class in the vue codebase, defined in src/v3/reactivity/effectScope.ts.
Where is EffectScope defined?
EffectScope is defined in src/v3/reactivity/effectScope.ts at line 6.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free