浅析Vue响应式原理(二)

Vue响应式原理之Observer

之前简单介绍了Dep和Watcher类的代码和作用,现在来介绍一下Observer类和set/get。在Vue实例后再添加响应式数据时需要借助Vue.set/vm.$set方法,这两个方法内部实际上调用了set方法。而Observer所做的就是将修改反映到视图中。

Observer

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that has this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0

    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

Observer有三个属性。value是响应式数据的值;dep是Dep实例,这个Dep实例用于Vue.set/vm.$set中通知依赖更新;vmCount表示把这个数据当成根data对象的实例数量,大于0时是实例化传入的根data对象。

构造函数接受一个值,表示要观察的值,这样,在Observer实例中引用了响应式数据,并将响应式数据的__ob__属性指向自身。如果被观察值是除数组以外的类型,会调用walk方法,令每个属性都是响应式。对于基本类型的值,Object.keys会返回一个空数组,所以在walk内,defineReactive只在对象的属性上执行。如果是被观察值是数组,那么会在每个元素上调用工厂函数observe,使其响应式。

对于数组,响应式的实现稍有不同。回顾一下在教程数组更新检测里的说明,变异方法会触发视图更新。其具体实现就在这里。arrayMethods是一个对象,保存了Vue重写的数组方法,具体重写方式下面再说,现在只需知道这些重写的数组方法除了保持原数组方法的功能外,还能通知依赖数据已更新。augment的用途是令value能够调用在arrayMethods中的方法,实现的方式有两种。第一种是通过原型链实现,在value.__proto__添加这些方法,优先选择这种实现。部分浏览器不支持__proto__,则直接在value上添加这些方法。

最后执行observeArray方法,遍历value,在每个元素上执行observe方法。

数组变异方法的实现

执行变异方法会触发视图功能,所以变异方法要实现的功能,除了包括原来数组方法的功能外,还要有通知依赖数据更新的功能。代码保存在/src/core/observer/array.js

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    return result
  })
})

模块内,使用arrayProto保存数组原型,arrayMethods的原型是arrayProto,用来保存变异后的方法,methodsToPatch是保存变异方法名的数组。

遍历methodsToPatch,根据方法名来获取在arrayProto上的数组变异方法,然后在arrayMethods实现同名方法。

在该同名方法内,首先执行缓存的数组方法original,执行上下文是this,这些方法最终会添加到响应式数组或其原型上,所以被调用时this是数组本身。ob指向this.__ob__,使用inserted指向被插入的元素,调用ob.observeArray观察新增的数组元素。最后执行ob.dep.notify(),通知依赖更新。

observe

工厂函数,获取value上__ob__属性指向的Observer实例,如果需要该属性且未定义时,根据数据创建一个Observer实例,在实例化时会在value上添加__ob__属性。参数二表示传入的value是否是根data对象。只有根数据对象的__ob__.vmCount大于0。

isObject判断value是不是Object类型,实现如obj !== null && typeof obj === 'object'

export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

此处可以看出,value与Observer实例ob之间是双向引用。value.__ob__指向ob,ob.value指向value

Vue.set

在Vue实例化以后,如果想为其添加新的响应式属性,对于对象,直接使用字面量赋值是没有效果的。由响应式数据的实现可以想到,这种直接赋值的方式,并没有为该属性自定义getter/setter,在获取属性时不会收集依赖,在更新属性时不会触发更新。如果想要为已存在的响应式数据添加新属性,可以使用Vue.set/vm.$set方法,但要注意,不能在data上添加新属性。

Vue.set/vm.$set内部都是在/src/code/observer/index.js定义的set的函数。

set函数接受三个参数,参数一target表示要新增属性的对象,参数二key表示新增的属性名或索引,参数三val表示新增属性的初始值。

export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    !Array.isArray(target) &&
    !isObject(target)
  ) {
    warn(`Cannot set reactive property on non-object/array value: ${target}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }

  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  // 不存在ob 说明不是响应式数据
  if (!ob) {
    target[key] = val
    return val
  }
  // 为target添加新属性
  defineReactive(ob.value, key, val)
  // ob.dep实际是target.__ob__.dep
  ob.dep.notify()
  return val
}

函数内部首先判断target类型,非数组或非对象的目标数据是无法添加响应式数据的。

如果是数组,且key是有效的数组索引,更新数组长度,然后调用变异方法splice,更新对应的值并触发视图更新。如果是对象,且属性keytarget的原型链上且不在Object.prototype上(即不是Object原型上定义的属性或方法),直接在target上添加或更新key

ob指向target.__ob__,如果target是Vue实例或是根data对象(ob.vmCount > 0),则无法新增数据,直接返回。

接着处理能为target添加属性的情况。不存在ob时,说明不是响应式数据,直接更新target。否则,执行defineReactive函数为ob.value新增响应式属性,ob.value实际指向target,添加之后调用ob.dep.notify()通知观察者重新求值,ob是Observer实例。

总结一下,set的内部逻辑:

target是数组时,更新长度,调用变异方法splice插入新元素即可。

target是对象时:

  • key在除Object.prototype外的原型链上时,直接赋值
  • key在原型链上搜索不到时,需要新增属性。如果target__ob__属性,说明不是响应式数据,直接赋值。否则调用defineReactive(ob.value, key, val)观察新数据,同时触发依赖。

Vue.delete

删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。

Vue.delete实际指向deldel接受两个参数,参数一target表示要删除属性的对象,参数二key表示要删除的属性名。

如果target是数组且key对于的索引在target中存在,使用变异方法splice方法直接删除。

如果target是Vue实例或是根data对象则返回,不允许在其上删除属性。key不是实例自身属性时也返回,不允许删除。如果是自身属性则使用delete删除,接着判断是否有__ob__属性,如果有,说明是响应式数据,执行__ob__.dep.notify通知视图更新。

export function del (target: Array<any> | Object, key: any) {
  if (process.env.NODE_ENV !== 'production' &&
    !Array.isArray(target) &&
    !isObject(target)
  ) {
    warn(`Cannot delete reactive property on non-object/array value: ${target}`)
  }
  // 数组 直接删除元素
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.splice(key, 1)
    return
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid deleting properties on a Vue instance or its root $data ' +
      '- just set it to null.'
    )
    return
  }
  // 属性不在target上
  if (!hasOwn(target, key)) {
    return
  }
  delete target[key]
  // 不是响应式数据
  if (!ob) {
    return
  }
  ob.dep.notify()
}

小结

关于Observer类和set/get的源码已经做了简单的分析,细心的读者可能会有一个问题:target.__ob__.dep是什么时候收集依赖的。答案就在defineReactive的源码中,其收集操作同样在响应式数据的getter中执行。

至于defineReactive的源码解析,在后面的文章再做分析。

参考链接

    原文作者:荡漾
    原文地址: https://segmentfault.com/a/1190000017152953
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞