Vue 源码剖析 —— 对象变化侦测

分手后的思念是犯贱 2022-01-12 01:53 196阅读 0赞

当应用在运行时，内部状态是会不断变化的。而对于 web 应用而言这会直接导致页面不停的重新渲染。那么如何通过状态变化确定具体要重新渲染哪个部分呢？在 MVVM 框架出现之前，大多数时候都需要手动去创建并维护数据与显示层的联系，随着应用的复杂度提高，内部状态和 UI 的联系变得错综复杂，难以维护。前端 MVVM 的框架正是通过编写一个通用的 *ViewModel* 层，负责让 *Model* 层的变化自动同步到 *View* 层，还负责让 *View* 层的修改同步回 *Model*。今天我们一起来剖析一下，当应用的内部状态改变时，Vue.js 是怎么做到侦测到变化的。

Vue.js 的变化侦测与 React 不同，对 React而言，当状态发生变化时，它并不知道具体哪个状态变化了，只知道状态有可能变了，然后发送信号给框架，框架内部收到信号后，会进行暴力比对找出来那些DOM节点需要重新渲染。对 Vue.js 而言，当状态发生改变时，它立刻就知道了，而且一定程度上知道具体哪些状态改变了，且如果一个状态上绑定了多个依赖，当状态改变时，会向所有绑定的依赖发送通知。但是，这种粒度更细也是要付出一定代价的，每个状态绑定的依赖越多，依赖跟踪在内存上的消耗就更大，这种情况在 Vue.js 2.0 引入虚拟 DOM 之后改善了很多。

#### 问题一：如何侦听一个对象的变化 ####

在 JS 中，我们侦听对象变化的手段无非两种：*Object.defineProperty* 和 ES6 的 *Proxy*。由于 ES6 的支持情况不理想，Vue.js 2.0 中采用的是第一种方法，但在新版本中应该会放弃 *Object.defineProperty* 选择 *Proxy*。因为 *Object.defineProperty* 是存在明显缺陷的，后文会提到。首先我们可以采用下面的函数来封装 *Object.defineProperty* ：

function defineReactive(data, key, val) {
      Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
          return val
        },
        set: function(newVal) {
          if (val === newVal) return
          val = newVal
        }
      })
    }
    复制代码

此时，思考一下，要观察数据的真正目的是什么？

目的就是当数据变化时，可以通知那些曾经使用过该数据的地方。所以我们需要先收集依赖，这样当数据变化时在去通知这些依赖。显而易见，可以在 getter 中收集依赖，在 setter 中触发依赖。

#### 问题二：依赖收集在哪里 ####

首先我们可以封装一个通用的依赖类，在 Vue.js 中是 *Dep* 类：

class Dep {
      constructor () {
        this.subs = []
      }
    
      addSub (sub) {
        this.subs.push(sub)
      }
    
      removeSub (sub) {
        remove(this.subs, sub)
      }
    
      depend () {
        if (somethingToWatch) {
          this.addSub(somethingToWatch)
        }
      }
    
      notify () {
        const subs = this.subs.slice()
        for (let sub of subs) {
          sub.update()
        }
      }
    }
    
    function remove (arr, items) {
      if (arr.length) {
        const index = arr.indexOf(item)
        if (index > -1) {
          return arr.splice(index, 1)
        }
      }
    }
    复制代码

接着改造一下 *defineReactive*：

function defineReactive(data, key, val) {
      let dep = new Dep()
      Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
          dep.depend()
          return val
        },
        set: function(newVal) {
          if (val === newVal) return
          val = newVal
          dep.notify()
        }
      })
    }
    复制代码

#### 问题三：依赖是谁 ####

在上面的 *Dep* 类中出现了 *somethingToWatch*，显然它正是我们在数据变化之后需要通知的对象。在 Vue.js 中，我们通知用到数据的地方有很多，比如模板中，或是自定义的一个 *watch* 。所以此时需要一个抽象的类来覆盖这些情况，Vue.js 中这个类为 *Watcher*：

class Watcher {
      constructor (vm, expOrFn, cb) {
        this.vm = vm
        this.getter = parsePath(expOrFn)
        this.cb = cb
        this.value = this.get()
      }
    
      get () {
        somethingToWatch = this
        let value = this.getter.call(this.vm, this.vm)
        somethingToWatch = undefined
        return value
      }
    
      update() {
        const oldValue = this.value
        this.value = this.get()
        this.cb.call(this.vm, this.value, oldValue)
      }
    }
    复制代码

在这段代码中，当 *Watcher* 初始化时，会调用 *get* 方法，而在 *get* 方法中，我们将 *somethingToWatch* 指向了当前的 *Watcher* 实例，当我们在获取 *value* 值的时候又会触发数据的 *getter*，从而自动将 *Watcher* 实例添加到 *Dep* 中。当数据变化时，*Dep* 会触发依赖列表中所有依赖的 *update* 方法，也就是 *Watcher* 中的 *update* 方法，*Watcher* 中的 *update* 方法。

可以看一个 *vm.$watch('a.b.c', (oldVal, newVal) => \{\})* 的例子，当 *a.b.c* 变化时，要调用后面的回调函数。首先，要解析 *a.b.c*，在 Vue.js 中用 *parsePath* 来完成：

const bailRE = /^\w+.$/
    function parsePath (path) {
      if (bailRE.test(path)) {
        return
      }
      const segments = path.split('.')
      return function (obj) {
        for (let segment of segments) {
          if (!obj) return
          obj = obj[segment]
        }
      }
      return obj
    }
    复制代码

至此，我们就拿到了 *a.b.c* 这个属性，且在 *Watcher* 的 *get* 方法中访问了它，触发了它的 *getter*，从而将当前 *Watcher* 实例添加到 *a.b.c* 的依赖列表里。且当 *a.b.c* 发生变化时，回调函数将会在 *Watcher* 中的 *update* 方法里被调用。

#### 问题四：怎么侦测所有 *key* ####

可以看到使用 *Object.defineProperty* 可以侦测到对象的某个属性值变化，但是我们需要侦听所有属性值（包括子属性）的变化。现在开始封装 *Observer* 类来实现这一目的：

/**
     * Observer 类会被附加到每一个被侦测的 object上。
     * 一旦加上，会将 object 所有的属性都转化为 getter/setter 的形式
     * 来收集属性依赖，并且在属性变化时通知这些依赖
     */
    class Observer {
      constructor(value) {
        this.value = value
    
        if (!Array.isArray(value)) {
          this.walk(value)
        }
      }
    
      /**
       * walk 将每一个属性都转为 getter/setter
       */
      walk (obj) {
        const keys = Object.keys(obj)
        for (let key of keys) {
          defineReactive(obj, key, obj[key])
        }
      }
    }
    
    function defineReactive(data, key, val) {
      // 新增，用于递归子属性
      if (typeof val == 'object') {
        new Observer(val)
      }
      ...
    }
    复制代码

通过定义了 *Observer* 类，我们将一个正常的 *object* 转换为了被侦测的 *object*。然后判断数据类型，只有 *Object* 类型的数据才会调用 *walk* 方法将每一个属性都变为 *getter/setter* 模式。而改造后的 *defineReactive* 加上了一段新代码用于判断当子属性为 *Object* 时，对子属性调用 *new Observer(val)*，从而形成递归。这样我们就把所有的属性都变为 *getter/setter* 的形式了。

#### 问题五：*Object.defineProperty* 带来的隐藏问题 ####

思考一个场景，当我们在一个 *Vue* 实例中，定义 *data: \{ a: \{\} \}*，又定义了一个方法 *action () \{ this.a.name = 'jay' \}*，如果调用了 *action* 方法，能不能侦听到对象 *a* 的改变呢？ 答案是否定的，由于在初始化过程中, *a* 并没有 *name* 这个属性，也就是说在 *walk* 方法中，我们没有将 *name* 属性变为 *getter/setter* 模式，所以无法侦测到这个变化，也不会向依赖发送通知。

再比如，我们在 *action* 中删除某个已经存在的属性值，*Object.defineProperty* 只能判断一个数据是否被修改，故同样也是无法侦测到变化的。要解决这两个问题，我们可以调用 *vm.![set\* 和 \*vm.][set_ _ _vm.]delete* 这两个API。

#### *Object* 的变化侦测过程梳理 ####

*Data* 通过 *Observe* 转换为 getter/setter 形式来追踪变化。当外界通过 *Watcher* 读取数据是，会触发 *getter* 从而将 *Watcher* 添加到依赖中。当数据发生变化时，会触发 *setter*，从而向 *Dep* 中的依赖发送通知。*Watcher* 收到通知后，会向外界发送通知，外界收到通知后，可能会触发视图更新，也可能触发用户的回调函数。

本系列文章均是[深入浅出 Vue.js][Vue.js]的学习笔记，有兴趣的小伙伴可以去看书哈。

转载于:https://juejin.im/post/5d09f8875188252f921b13b7

[set_ _ _vm.]: https://juejin.im/equation?tex=set*%20%E5%92%8C%20*vm.
[Vue.js]: https://link.juejin.im?target=https%3A%2F%2Fbook.douban.com%2Fsubject%2F32581281%2F