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
  15f3b57b_caa4_ff31_579b_0dcb115c7a9f["EffectScope"]
  2201dcb0_bcf7_bce0_da13_64df866d683f["effectScope.ts"]
  15f3b57b_caa4_ff31_579b_0dcb115c7a9f -->|defined in| 2201dcb0_bcf7_bce0_da13_64df866d683f
  3c761336_d15a_6f6e_fbf8_3d523136ef4c["constructor()"]
  15f3b57b_caa4_ff31_579b_0dcb115c7a9f -->|method| 3c761336_d15a_6f6e_fbf8_3d523136ef4c
  b30bbc11_9716_a61c_ae7f_4a3052b2a283["run()"]
  15f3b57b_caa4_ff31_579b_0dcb115c7a9f -->|method| b30bbc11_9716_a61c_ae7f_4a3052b2a283
  72b9b32d_1d0c_d7ed_1d79_0dbb66718b17["on()"]
  15f3b57b_caa4_ff31_579b_0dcb115c7a9f -->|method| 72b9b32d_1d0c_d7ed_1d79_0dbb66718b17
  ee998b84_db41_efcf_f5cd_2921e426161e["off()"]
  15f3b57b_caa4_ff31_579b_0dcb115c7a9f -->|method| ee998b84_db41_efcf_f5cd_2921e426161e
  83caa22f_a753_1666_0e0a_f4a733ccb55f["stop()"]
  15f3b57b_caa4_ff31_579b_0dcb115c7a9f -->|method| 83caa22f_a753_1666_0e0a_f4a733ccb55f

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