vue Architecture Docs
Home / Function/ stateMixin() — vue Function Reference

stateMixin() — vue Function Reference

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

Function typescript CoreRuntime InstanceState calls 4

Entity Profile

Dependency Diagram

graph TD
  dfb98f6e_f77e_f8b1_4779_1235de201c9b["stateMixin()"]
  63797968_e46c_d348_9f28_9f4fa66877aa["createWatcher()"]
  dfb98f6e_f77e_f8b1_4779_1235de201c9b -->|calls| 63797968_e46c_d348_9f28_9f4fa66877aa
  0f6ffc11_2e95_459d_b27e_bbd8d5d18e4a["pushTarget()"]
  dfb98f6e_f77e_f8b1_4779_1235de201c9b -->|calls| 0f6ffc11_2e95_459d_b27e_bbd8d5d18e4a
  a51c7238_0b82_ad88_085b_cd519eb78568["popTarget()"]
  dfb98f6e_f77e_f8b1_4779_1235de201c9b -->|calls| a51c7238_0b82_ad88_085b_cd519eb78568
  548462f9_f5ae_6335_80f2_a5f5b9fdf922["teardown()"]
  dfb98f6e_f77e_f8b1_4779_1235de201c9b -->|calls| 548462f9_f5ae_6335_80f2_a5f5b9fdf922
  style dfb98f6e_f77e_f8b1_4779_1235de201c9b 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()
    }
  }
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does stateMixin() do?
stateMixin() is a function in the vue codebase.
What does stateMixin() call?
stateMixin() calls 4 function(s): createWatcher, popTarget, pushTarget, teardown.

Analyze Your Own Codebase

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

Try Supermodel Free