stateMixin() — vue Function Reference

Architecture documentation for the stateMixin() function in state.ts from the vue codebase.

Function typescript VueCore Instance calls 4

Entity Profile

VueCore→ Instance→ stateMixin() — vue Function Reference

Dependency Diagram

graph TD
  8821e5be_a66e_607b_6fb4_39002df1a03a["stateMixin()"]
  079339bc_f0ce_0fd0_3d1b_26a2dc073616["state.ts"]
  8821e5be_a66e_607b_6fb4_39002df1a03a -->|defined in| 079339bc_f0ce_0fd0_3d1b_26a2dc073616
  4cdb033a_f511_f759_d9d2_28da362d97b1["createWatcher()"]
  8821e5be_a66e_607b_6fb4_39002df1a03a -->|calls| 4cdb033a_f511_f759_d9d2_28da362d97b1
  d9fae33f_7845_7289_de16_bee11c7f60e1["pushTarget()"]
  8821e5be_a66e_607b_6fb4_39002df1a03a -->|calls| d9fae33f_7845_7289_de16_bee11c7f60e1
  e4823f37_5db2_5310_aa9c_5b3593b02b07["popTarget()"]
  8821e5be_a66e_607b_6fb4_39002df1a03a -->|calls| e4823f37_5db2_5310_aa9c_5b3593b02b07
  be270b49_47e8_8f99_8878_880772c2e703["teardown()"]
  8821e5be_a66e_607b_6fb4_39002df1a03a -->|calls| be270b49_47e8_8f99_8878_880772c2e703
  style 8821e5be_a66e_607b_6fb4_39002df1a03a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/instance/state.ts lines 341–393

export function stateMixin(Vue: typeof Component) {
  // flow somehow has problems with directly declared definition object
  // when using Object.defineProperty, so we have to procedurally build up
  // the object here.
  const dataDef: any = {}
  dataDef.get = function () {
    return this._data
  }
  const propsDef: any = {}
  propsDef.get = function () {
    return this._props
  }
  if (__DEV__) {
    dataDef.set = function () {
      warn(
        'Avoid replacing instance root $data. ' +
          'Use nested data properties instead.',
        this
      )
    }
    propsDef.set = function () {
      warn(`$props is readonly.`, this)
    }
  }
  Object.defineProperty(Vue.prototype, '$data', dataDef)
  Object.defineProperty(Vue.prototype, '$props', propsDef)

  Vue.prototype.$set = set
  Vue.prototype.$delete = del

  Vue.prototype.$watch = function (
    expOrFn: string | (() => any),
    cb: any,
    options?: Record<string, any>
  ): Function {
    const vm: Component = this
    if (isPlainObject(cb)) {
      return createWatcher(vm, expOrFn, cb, options)
    }
    options = options || {}
    options.user = true
    const watcher = new Watcher(vm, expOrFn, cb, options)
    if (options.immediate) {
      const info = `callback for immediate watcher "${watcher.expression}"`
      pushTarget()
      invokeWithErrorHandling(cb, vm, [watcher.value], vm, info)
      popTarget()
    }
    return function unwatchFn() {
      watcher.teardown()
    }
  }
}