Vue数据绑定简析小结(5)

日期：2020-05-11 栏目：程序人生浏览：次

构造函数里初始化了 value 、 dep 和 vmCount 三个属性，为 this.value 添加 __ob__ 对象并指向自己，即 value.__ob__.value === value ，这样就可以通过 value 或 __ob__ 对象取到 dep 和 value 。 vmCount 的作用主要是用来区分是否为 Vue 实例的根 data ， dep 的作用这里先不介绍，待与 getter/setter 里的 dep 一起解释。

接着根据 value 是数组还是纯对象来分别调用相应的方法，对 value 进行递归操作。当 value 为纯对象时，调用 walk 方法，递归调用 defineReactive 。当 value 是数组类型时，首先判断是否有 __proto__ ，有就使用 __proto__ 实现原型链继承，否则用 Object.defineProperty 实现拷贝继承。其中继承的基类 arrayMethods 来自 src/core/observer/array.js ：

// 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) {
 // cache original 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
 })
})

这里为什么要对数组的实例方法进行重写呢？代码里的 methodsToPatch 这些方法并不会返回新的数组，导致无法触发 setter ，因而不会调用观察者的方法。所以重写了这些变异方法，使得在调用的时候，利用 observeArray 对新插入的数组元素添加 __ob__ ，并能够通过 ob.dep.notify 手动通知对应的被观察者执行注册的方法，实现数组元素的响应式。

if (asRootData && ob) {
  ob.vmCount++
}

最后添加这个 if 判断，在 Vue 实例的根 data 对象上，执行 ob.vmCount++ ，这里主要为了后面根据 ob.vmCount 来区分是否为根数据，从而在其上执行 Vue.set 和 Vue.delete 。

getter/setter

在对 val 进行递归操作后(假如需要的话)，将 obj[key] 的数据对象封装成了一个被观察者，使得能够被观察者观察，并在需要的时候调用观察者的方法。这里通过 Object.defineProperty 重写了 obj[key] 的访问器属性，对 getter/setter 操作做了拦截处理， defineReactive 剩余的代码具体如下：

...
Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: function reactiveGetter () {
  const value = getter ? getter.call(obj) : val
  if (Dep.target) {
   dep.depend()
   if (childOb) {
    childOb.dep.depend()
    if (Array.isArray(value)) {
     dependArray(value)
    }
   }
  }
  return value
 },
 set: function reactiveSetter (newVal) {
  ...
  childOb = !shallow && observe(newVal)
  dep.notify()
 }
})

转载注明出处：http://www.heiqu.com/385.html

Vue数据绑定简析小结(5)

相关推荐