stateMixin() — vue Function Reference

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

Function typescript CoreRuntime Instance calls 4

Entity Profile

CoreRuntime→ Instance→ stateMixin() — vue Function Reference

Dependency Diagram

graph TD
  c74446fc_5d22_d545_3c00_31643a8c20db["stateMixin()"]
  910d3a96_5984_cf85_40a3_47933bd75818["state.ts"]
  c74446fc_5d22_d545_3c00_31643a8c20db -->|defined in| 910d3a96_5984_cf85_40a3_47933bd75818
  ddb96146_01d1_fd85_9f00_1f6bdd19831c["createWatcher()"]
  c74446fc_5d22_d545_3c00_31643a8c20db -->|calls| ddb96146_01d1_fd85_9f00_1f6bdd19831c
  46145e02_0be2_a179_3c66_d786e8df82f3["pushTarget()"]
  c74446fc_5d22_d545_3c00_31643a8c20db -->|calls| 46145e02_0be2_a179_3c66_d786e8df82f3
  f641f94c_5096_9084_3285_10f3d148c139["popTarget()"]
  c74446fc_5d22_d545_3c00_31643a8c20db -->|calls| f641f94c_5096_9084_3285_10f3d148c139
  f780ff44_85db_e399_d971_8fdf493ab15a["teardown()"]
  c74446fc_5d22_d545_3c00_31643a8c20db -->|calls| f780ff44_85db_e399_d971_8fdf493ab15a
  style c74446fc_5d22_d545_3c00_31643a8c20db 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()
    }
  }
}