JZTXT

Vue——stateMixin【十五】

发布时间 2023-04-23 13:57:24作者: 。思索

前言

经过initMixin再接下来就到了stateMixin，接下来咱们就看看stateMixin中到底有什么；

内容

stateMixin位于src/core/instance/state.ts下；

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.
 // $data
  const dataDef: any = {}
  dataDef.get = function () {
    return this._data
    }
 // $props
  const propsDef: any = {}
  propsDef.get = function () {
    return this._props
    }
    // 开发环境下针对set行为的警告
  if (__DEV__) {
      dataDef.set = function () {
        // 不可以替换根实例上的$data
      warn(
        'Avoid replacing instance root $data. ' +
          'Use nested data properties instead.',
        this
      )
      }
    // $props是只读的
    propsDef.set = function () {
      warn(`$props is readonly.`, this)
    }
    }
    // 将dataDef和propsDef 添加到原型链上
  Object.defineProperty(Vue.prototype, '$data', dataDef)
  Object.defineProperty(Vue.prototype, '$props', propsDef)

  // 将set和del方法挂载到原型链上 || 位于observer/index.ts
  Vue.prototype.$set = set
  Vue.prototype.$delete = del

  // $watch方法定义
  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
      // 位于obeserver/watcher.ts
      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()
    }
  }
}

总结

1. $data定义
2. $props定义
3. $set定义
4. $delete定义
5. $watch定义