Home / Class/ Observer Class — vue Architecture

Observer Class — vue Architecture

Architecture documentation for the Observer class in index.ts from the vue codebase.

Entity Profile

Dependency Diagram

graph TD
  3fc566ae_243e_2f0a_95d9_c612fe08e096["Observer"]
  af395f8e_1ac5_a239_71b7_fd29a1c03d2c["index.ts"]
  3fc566ae_243e_2f0a_95d9_c612fe08e096 -->|defined in| af395f8e_1ac5_a239_71b7_fd29a1c03d2c
  e9e3ee0b_266d_b038_5ecd_44bb28d26857["constructor()"]
  3fc566ae_243e_2f0a_95d9_c612fe08e096 -->|method| e9e3ee0b_266d_b038_5ecd_44bb28d26857
  61775709_acae_0dfb_ce5f_30156271b1e7["observeArray()"]
  3fc566ae_243e_2f0a_95d9_c612fe08e096 -->|method| 61775709_acae_0dfb_ce5f_30156271b1e7

Relationship Graph

Source Code

src/core/observer/index.ts lines 48–95

export class Observer {
  dep: Dep
  vmCount: number // number of vms that have this object as root $data

  constructor(public value: any, public shallow = false, public mock = false) {
    // this.value = value
    this.dep = mock ? mockDep : new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    if (isArray(value)) {
      if (!mock) {
        if (hasProto) {
          /* eslint-disable no-proto */
          ;(value as any).__proto__ = arrayMethods
          /* eslint-enable no-proto */
        } else {
          for (let i = 0, l = arrayKeys.length; i < l; i++) {
            const key = arrayKeys[i]
            def(value, key, arrayMethods[key])
          }
        }
      }
      if (!shallow) {
        this.observeArray(value)
      }
    } else {
      /**
       * Walk through all properties and convert them into
       * getter/setters. This method should only be called when
       * value type is Object.
       */
      const keys = Object.keys(value)
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i]
        defineReactive(value, key, NO_INITIAL_VALUE, undefined, shallow, mock)
      }
    }
  }

  /**
   * Observe a list of Array items.
   */
  observeArray(value: any[]) {
    for (let i = 0, l = value.length; i < l; i++) {
      observe(value[i], false, this.mock)
    }
  }
}

Domain

Frequently Asked Questions

What is the Observer class?
Observer is a class in the vue codebase, defined in src/core/observer/index.ts.
Where is Observer defined?
Observer is defined in src/core/observer/index.ts at line 48.

Analyze Your Own Codebase

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

Try Supermodel Free