dep.ts — vue Source File

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

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

Entity Profile

VueCore→ Observer→ dep.ts — vue Source File

Dependency Diagram

graph LR
  e5c4d6ab_2495_a6d4_d962_9d9f71bf3114["dep.ts"]
  81a11719_3457_ecad_7c86_c586d804debb["config.ts"]
  e5c4d6ab_2495_a6d4_d962_9d9f71bf3114 --> 81a11719_3457_ecad_7c86_c586d804debb
  d970b406_3424_b00e_55dd_82e98ab5aac2["v3"]
  e5c4d6ab_2495_a6d4_d962_9d9f71bf3114 --> d970b406_3424_b00e_55dd_82e98ab5aac2
  d937f76e_061f_a631_9587_336503c9a15c["lifecycle.ts"]
  d937f76e_061f_a631_9587_336503c9a15c --> e5c4d6ab_2495_a6d4_d962_9d9f71bf3114
  079339bc_f0ce_0fd0_3d1b_26a2dc073616["state.ts"]
  079339bc_f0ce_0fd0_3d1b_26a2dc073616 --> e5c4d6ab_2495_a6d4_d962_9d9f71bf3114
  af395f8e_1ac5_a239_71b7_fd29a1c03d2c["index.ts"]
  af395f8e_1ac5_a239_71b7_fd29a1c03d2c --> e5c4d6ab_2495_a6d4_d962_9d9f71bf3114
  36c7708b_24b4_08c9_e39f_50f332a4b206["scheduler.ts"]
  36c7708b_24b4_08c9_e39f_50f332a4b206 --> e5c4d6ab_2495_a6d4_d962_9d9f71bf3114
  093a7a23_fa4b_6464_b268_8f9d10bcaa2f["watcher.ts"]
  093a7a23_fa4b_6464_b268_8f9d10bcaa2f --> e5c4d6ab_2495_a6d4_d962_9d9f71bf3114
  88dc54e4_4a50_ce50_5fb5_52118613323e["error.ts"]
  88dc54e4_4a50_ce50_5fb5_52118613323e --> e5c4d6ab_2495_a6d4_d962_9d9f71bf3114
  3a7c7919_1905_22a7_f604_9084d5e5d0df["apiSetup.ts"]
  3a7c7919_1905_22a7_f604_9084d5e5d0df --> e5c4d6ab_2495_a6d4_d962_9d9f71bf3114
  style e5c4d6ab_2495_a6d4_d962_9d9f71bf3114 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]
}