dep.ts — vue Source File

Architecture documentation for dep.ts, a typescript file in the vue codebase. 2 imports, 7 dependents.

File typescript CoreRuntime Observer 2 imports 7 dependents 3 functions 1 classes

Entity Profile

CoreRuntime→ Observer→ dep.ts — vue Source File

Dependency Diagram

graph LR
  dfb2b3e1_ffba_6029_124e_b43a30f0f999["dep.ts"]
  d22f3dff_cc24_705a_1193_eec206dcb1d5["config.ts"]
  dfb2b3e1_ffba_6029_124e_b43a30f0f999 --> d22f3dff_cc24_705a_1193_eec206dcb1d5
  6a13c450_be5a_326d_7e2d_c1d429be7e83["v3"]
  dfb2b3e1_ffba_6029_124e_b43a30f0f999 --> 6a13c450_be5a_326d_7e2d_c1d429be7e83
  f3560440_54c1_5663_36f8_c7de54d7310b["lifecycle.ts"]
  f3560440_54c1_5663_36f8_c7de54d7310b --> dfb2b3e1_ffba_6029_124e_b43a30f0f999
  910d3a96_5984_cf85_40a3_47933bd75818["state.ts"]
  910d3a96_5984_cf85_40a3_47933bd75818 --> dfb2b3e1_ffba_6029_124e_b43a30f0f999
  012c0986_6b9d_ad59_8fba_57884312dd3b["index.ts"]
  012c0986_6b9d_ad59_8fba_57884312dd3b --> dfb2b3e1_ffba_6029_124e_b43a30f0f999
  7cc5a667_1876_f28e_e26f_27fcdcba292e["scheduler.ts"]
  7cc5a667_1876_f28e_e26f_27fcdcba292e --> dfb2b3e1_ffba_6029_124e_b43a30f0f999
  acd39cb4_1b40_1f96_d7d8_00ba7dc7b283["watcher.ts"]
  acd39cb4_1b40_1f96_d7d8_00ba7dc7b283 --> dfb2b3e1_ffba_6029_124e_b43a30f0f999
  34ce4c45_a0c3_08f3_7cbe_679778705432["error.ts"]
  34ce4c45_a0c3_08f3_7cbe_679778705432 --> dfb2b3e1_ffba_6029_124e_b43a30f0f999
  4ad51b1f_61ec_31ba_dbb7_667d6a0a8c85["apiSetup.ts"]
  4ad51b1f_61ec_31ba_dbb7_667d6a0a8c85 --> dfb2b3e1_ffba_6029_124e_b43a30f0f999
  style dfb2b3e1_ffba_6029_124e_b43a30f0f999 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import config from '../config'
import { DebuggerOptions, DebuggerEventExtraInfo } from 'v3'

let uid = 0

const pendingCleanupDeps: Dep[] = []

export const cleanupDeps = () => {
  for (let i = 0; i < pendingCleanupDeps.length; i++) {
    const dep = pendingCleanupDeps[i]
    dep.subs = dep.subs.filter(s => s)
    dep._pending = false
  }
  pendingCleanupDeps.length = 0
}

/**
 * @internal
 */
export interface DepTarget extends DebuggerOptions {
  id: number
  addDep(dep: Dep): void
  update(): void
}

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 * @internal
 */
export default class Dep {
  static target?: DepTarget | null
  id: number
  subs: Array<DepTarget | null>
  // pending subs cleanup
  _pending = false

  constructor() {
    this.id = uid++
    this.subs = []
  }

  addSub(sub: DepTarget) {
    this.subs.push(sub)
  }

  removeSub(sub: DepTarget) {
    // #12696 deps with massive amount of subscribers are extremely slow to
    // clean up in Chromium
    // to workaround this, we unset the sub for now, and clear them on
    // next scheduler flush.
    this.subs[this.subs.indexOf(sub)] = null
    if (!this._pending) {
      this._pending = true
      pendingCleanupDeps.push(this)
    }
  }

  depend(info?: DebuggerEventExtraInfo) {
    if (Dep.target) {
      Dep.target.addDep(this)
      if (__DEV__ && info && Dep.target.onTrack) {
        Dep.target.onTrack({
          effect: Dep.target,
          ...info
        })
      }
    }
  }

  notify(info?: DebuggerEventExtraInfo) {
    // stabilize the subscriber list first
    const subs = this.subs.filter(s => s) as DepTarget[]
    if (__DEV__ && !config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      const sub = subs[i]
      if (__DEV__ && info) {
        sub.onTrigger &&
          sub.onTrigger({
            effect: subs[i],
            ...info
          })
      }
      sub.update()
    }
  }
}

// The current target watcher being evaluated.
// This is globally unique because only one watcher
// can be evaluated at a time.
Dep.target = null
const targetStack: Array<DepTarget | null | undefined> = []

export function pushTarget(target?: DepTarget | null) {
  targetStack.push(target)
  Dep.target = target
}

export function popTarget() {
  targetStack.pop()
  Dep.target = targetStack[targetStack.length - 1]
}