vue的变化侦测-Object篇｜ 8月更文挑战

敲代码有瘾
331 阅读6分钟

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

vue的变化侦测-Object篇

众所周知，Vue最大的特点之一就是数据驱动视图，那什么是数据驱动视图？也就是说，当数据发生变化时对应的视图就要更新。接下来我们就通过阅读源码来看一下Vue内部是怎么对数据进行变化侦测的。

首先我们知道，数据驱动视图的关键点在于我们怎么知道数据发生了变化，只要知道数据发生了变化，那么在数据发生变化时去通知对应的视图更新即可。要想知道数据什么时候被读取了或数据什么时候被改写了，其实不难，JavaScript为我们提供了Object.defineProperty方法，通过该方法我们就可以轻松的知道数据在什么时候发生变化。

使Object数据变得可观测

首先我们来看一个例子：

let car = {}
let val = 3000
Object.defineProperty(car, 'price', {
  enumerable: true,
  configurable: true,
  get(){
    console.log('price属性被读取了')
    return val
  },
  set(newVal){
    console.log('price属性被修改了')
    val = newVal
  }
})

上面的例子中，我们通过Object.defineProperty方法给car这个对象声明了一个属性price，并通过改写它的get()、set()方法对这个属性的读写进行了拦截，所以在我们读取或者修改这个price属性的时候，就会触发get和set方法，这样这个price就变成了可侦测的了。vue内部也是通过拦截属性的get和set方法来监听数据的变化的。

下面我们看一下vue的源码是怎么实现数据的监听的：

源码位于 src/core/observer/index.js

// 以下代码是简化版的，想看完整的可以到gitHub上克隆一下vue完整的源码 https://github.com/vuejs/vue 
export class Observer {
  value: any;
  dep: Dep;
  vmCount: number;
  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    /**
     * 给value新增一个 __ob__属性，值为该value的Observe实例
     * 相当于为value打上标记，表示它已经被转化成响应式了，避免重复操作
     */
    def(value, '__ob__', this)
    if (Array.isArray(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])
    }
  }
}

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep() // 先实例化一个依赖管理器，生成一个依赖管理数组dep

  const property = Object.getOwnPropertyDescriptor(obj, key)
  /**
   * getOwnPropertyDescriptor() 获取到的是 属性描述符 对象
   * {
       configurable: true,
       enumerable: true,
       value: 42,
       writable: true
     }
   */
  if (property && property.configurable === false) {
    return
  }

  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend() // 在get的时候，收集依赖
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify() // 在set的时候通知依赖
    }
  })
}

在上面的代码中，vue定义了一个Observe类，它用来将一个Object对象转化为一个可侦测的对象。并且给value增加了一个新的属性__ob__，这个属性就是Observe实例，这个属性相当于是给value打上标记，表示这个值已经是一个可监测的了，避免后续的重复操作。

然后再调用walk函数遍历对象中的每一个属性，将每一个属性都通过Object.defineProperty方法变成get/set的形式来监听属性变化。

这样，我们只要将一个object对象传入到Observe中，这个对象就会变成可监测的。

依赖收集

第一步我们通过Observe类将一个对象变成可监测的对象了，现在数据的读写变化我们都可以监测到了，那么我们就应该在数据变化时去通知依赖更新了，那什么是依赖，依赖在哪里收集的呢？我们怎么去通知依赖更新的呢？

简单来说，依赖就是谁用到了这个数据，那么它就是那个依赖。我们可以为每一个数据创建一个依赖数组，谁用到了这个数据，我们就把谁放进这个依赖数组里，当数据变化时，我们挨个通知这个依赖数组中的每一项去更新即可。

在哪里收集依赖，哪里通知依赖？

谁用到了这个数据，那么当这个数据变化时就通知谁。所谓谁用到了这个数据，其实就是谁获取了这个数据，而可观测的数据被获取时会触发get方法，那么我们就可以在get中收集这个依赖。同样，当这个数据变化时会触发set方法，那么我们就可以在set中通知依赖更新。

依赖管理器

我们给每个数据都建一个依赖数组，谁依赖了这个数据我们就把谁放入这个依赖数组中。于是vue内部创建了一个依赖管理器Dep。

源码位置：src/core/observer/dep.js

export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = [] // 初始化一个subs数组，用来存放依赖
  }

  addSub (sub: Watcher) {
    this.subs.push(sub)
  }
  /**
   * 删除一个依赖
   */
  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }
  /**
   * 添加一个依赖
   */
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }
  /**
   * 通知依赖更新
   */
  notify () {
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

在上面的依赖管理器Dep类中，我们先初始化了一个subs数组，用来存放依赖，并且定义了几个实例方法用来对依赖进行添加，删除，通知等操作。有了依赖管理器后，我们就可以在get中收集依赖，在set中通知依赖更新了。

function defineReactive (obj,key,val) {
  if (arguments.length === 2) {
    val = obj[key]
  }
  if(typeof val === 'object'){
    new Observer(val)
  }
  const dep = new Dep()  //实例化一个依赖管理器，生成一个依赖管理数组dep
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get(){
      dep.depend()    // 在get中收集依赖
      return val;
    },
    set(newVal){
      if(val === newVal){
          return
      }
      val = newVal;
      dep.notify()   // 在set中通知依赖更新
    }
  })
}

在上述代码中，我们在get中调用了dep.depend()方法收集依赖，在set中调用dep.notify()方法通知所有依赖更新。

依赖到底是谁？

前面我们明白了什么是依赖？何时收集依赖？以及收集的依赖存放到何处？那么我们收集的依赖到底是谁？

其实在Vue中还实现了一个叫做Watcher的类，而Watcher类的实例就是我们上面所说的那个"谁"。换句话说就是：谁用到了数据，谁就是依赖，我们就为谁创建一个Watcher实例。在之后数据变化时，我们不直接去通知依赖更新，而是通知依赖对应的Watch实例，由Watcher实例去通知真正的视图。

Watch类源码位置：src/core/observer/watcher.js

// watcher类简化版
export default class Watcher {
  constructor (vm,expOrFn,cb) {
    this.vm = vm;
    this.cb = cb;
    this.getter = parsePath(expOrFn)
    this.value = this.get()
  }
  get () {
    window.target = this;
    const vm = this.vm
    let value = this.getter.call(vm, vm)
    window.target = undefined;
    return value
  }
  update () {
    const oldValue = this.value
    this.value = this.get()
    this.cb.call(this.vm, this.value, oldValue)
  }
}

谁用到了数据，谁就是依赖，我们就为谁创建一个Watcher实例，在创建Watcher实例的过程中会自动的把自己添加到这个数据对应的依赖管理器中，以后这个Watcher实例就代表这个依赖，当数据变化时，我们就通知Watcher实例，由Watcher实例再去通知真正的依赖。 那么，在创建Watcher实例的过程中它是如何的把自己添加到这个数据对应的依赖管理器中呢？ 下面我们分析Watcher类的代码实现逻辑：

  1. 当实例化Watcher类时，会先执行其构造函数；
  2. 在构造函数中调用了this.get()实例方法；
  3. 在get()方法中，首先通过window.target = this把实例自身赋给了全局的一个唯一对象window.target上，然后通过let value = this.getter.call(vm, vm)获取一下被依赖的数据，获取被依赖数据的目的是触发该数据上面的getter，上文我们说过，在getter里会调用dep.depend()收集依赖，而在dep.depend()中取到挂载window.target上的值并将其存入依赖数组中，在get()方法最后将window.target释放掉。
  4. 而当数据变化时，会触发数据的setter，在setter中调用了dep.notify()方法，在dep.notify()方法中，遍历所有依赖(即watcher实例)，执行依赖的update()方法，也就是Watcher类中的update()实例方法，在update()方法中调用数据变化的更新回调函数，从而更新视图。 简单总结一下就是：Watcher先把自己设置到全局唯一的指定位置（window.target），然后读取数据。因为读取了数据，所以会触发这个数据的getter。接着，在getter中就会从全局唯一的那个位置读取当前正在读取数据的Watcher，并把这个watcher收集到Dep中去。收集好之后，当数据发生变化时，会向Dep中的每个Watcher发送通知。

不足之处

虽然我们通过Object.defineProperty方法实现了对object数据的可观测，但是这个方法仅仅只能观测到object数据的取值及设置值，当我们向object数据里添加一对新的key/value或删除一对已有的key/value时，它是无法观测到的，导致当我们对object数据添加或删除值时，无法通知依赖，无法驱动视图进行响应式更新。为了解决这个问题，我们可以使用vue.$set和vue.$delete。

总结

  1. vue中实现了一个Observer类，这个类可以将一个对象的所有属性通过Object.defineProperty来拦截属性的get和set方法对数据变化进行侦测。然后在获取数据时，即get被触发时收集依赖，在数据变化时，即set调用时通知依赖更新。

  2. vue实现了一个Dep类，这个类用来管理每一个数据的依赖项。

  3. 当数据发生了变化时，会触发set，从而向Dep中的依赖（即Watcher）发送通知。Watcher接收到通知后，会向外界发送通知，触发视图更新。

avatar
文章
阅读
粉丝