ShymeanV0.8.0

Vue源码阅读笔记之响应式原理（二）

发表于| 分类于技术原理

这是"Vue源码阅读笔记"系列第二篇文章。前一篇文章中我们提到initState中调用的initData方法，调用observe(data)完成了对数据的观察。

在很早之前的对象描述符与响应式数据这篇文章中，对于defineProperty做了简单的整理，并实现了一个比较粗糙的响应式数据更新视图的例子。接下来让我们深入Vue的核心部分：响应式数据的工作原理。

<!--more-->

参考：

接下来我们看看Vue中initData是如何实现的响应式数据的。跟前面一样，我们对initData进行简化

function initData (vm: Component) {
  let data = vm.$options.data
  // 对数据进行代理
  const keys = Object.keys(data)
  let i = keys.length
  while (i--) {
    const key = keys[i]
    proxy(vm, `_data`, key)
  }
  // 观察数据变化
  observe(data, true /* asRootData */)
}

在initData中做了两件事

  • 将数据代理到this上
  • 实现响应式数据

1. 数据代理

在Vue中，我们可以通过 this.msg 访问到 this.$data.msg，这是通过数据代理实现的，原理十分简单，即修改对应的getter和setter。

export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

2. 响应式数据

在Vue文档中提到了响应式数据的基本原理，稍作整理得到下列结论

  • 数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新
  • 如何监听数据的变化呢？所谓监听数据变化，实际上是监听数据某个属性值的变化，Vue使用的是Object.defineProperty。
  • 数据属性值变化时该如何更新视图呢？通过发布-订阅者模式，维护一个订阅该属性值的队列，并在值变化时通知所有订阅者，更新视图

其中，Object.defineProperty和订阅者模式在对象描述符与响应式数据这里已经提到过，这里就不再赘述了，我们来看看Vue中是如何实现的。

在Vue中，由Observer、Dep和Watcher这三个类构成了Vue响应式系统（即observer模块）的核心。observer模块位于/src/core/observer下面。

此处强烈推荐observer-dep-watch这个项目，相当于一个精简版的响应式系统。下面的源码中，我移除了一些细节代码，这样可以更清晰地了解整个模块的结构。

###Observer

Observer用来将数据转换成可监控的值

// /src/core/observer/index.js
class Observer {
  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)
    }
  }
}

2.1. Watcher

Watcher是数据变化的订阅者，用来执行数据变化之后的某些操作（比如更新视图）

class Watcher {
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm

    this.cb = cb
    this.expression = expOrFn.toString()
    // parse expression for getter
    // 把需要观察的属性值表达式解析成一个可执行的函数
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      // ...
    }

    // 这里会调用pushTarget和一次getter
    this.value = this.lazy ? undefined : this.get()
  }
}

构建一个Watcher对象需要的构造参数中包括

  • expOrFn，表示需要监听的属性名
  • cb，对应属性名的值发生变化时的回调，用于处理相应的业务逻辑（比如更新视图）

###Dep

Dep用来连接Observer和Watcher，并充当事件变化的发布者：通过Observer提供的set和get，在get中收集Watcher，在set中通知Watcher。

class Dep {
  constructor () {
    this.id = uid++
    this.subs = []
  }

  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

上面只是复制粘贴了相关的实现源码，那么，这三个类是如何关联起来的呢？

2.2. Observer与Dep的关联

首先，在Observer的walk方法中，对数据对象的每个属性进行劫持

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

可以看见实际上是defineReactive在工作，这个函数在其他的源文件中也出现过很多次。

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  // 递归劫持setter和getter
  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = val
      if (Dep.target) {
        // 收集依赖
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = val
      // 新旧值相同不触发更新的原因
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }

      val = newVal
      childOb = !shallow && observe(newVal)
      // 通知订阅者
      dep.notify()
    }
  })
}

这里通过defineReactive与set和get形成闭包，为数据的每个属性（包括子属性）都维护了一个Dep对象，可以看见：

  • 在get中通过dep.depend()添加订阅者
  • 在set中通过dep.notify()通知订阅者

其中还有一些检测属性描述符configurable、已设置的setter和getter等代码，这里先省略了

2.3. Watcher与Dep的关联

这个就简单了，Dep作为发布者，Watcher作为订阅者，直接通过其接口关联即可

// Dep.addSub
addSub (sub: Watcher) {
      this.subs.push(sub)
}

// Watcher.addDep
addDep (dep: Dep) {
    const id = dep.id
    if (!this.depIds.has(id)) {
      dep.addSub(this)
    }
}

然而在上面添加订阅者的时候，我们发现是通过dep.depend()来实现的

// Dep.depend
depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
}

这里使用了一个静态对象Dep.target，来标识当前的Watcher，

// dep.js
Dep.target = null
const targetStack = []

export function pushTarget (_target: Watcher) {
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}

在Watcher构造函数中的最后一句调用了this.get()

// watcher.js
this.value = this.lazy ? undefined : this.get()
// Watcher.get
get(){
  // 这里先将Dep.target关联到当前的Watcher实例对象
  pushTarget(this);
   try {
      // getter实际上就是Watcher观察的属性表达式
      value = this.getter.call(vm, vm)
   }catch (e) {
     // ...
   }
}

2.4. 分析

下面一步步分析：

  • Watcher的构造函数中，我们可以了解到this.getter实际上就是构造参数expOrFn的函数形式（这是在/src/core/util/lang.js的parsePath实现的），其作用就是获取数据对象对应属性表达式的值，这里相当于调用了一次get，
  • 调用get，这样就可以触发defineReactive中该属性描述符get中的dep.depend()，
  • 由于在调用get之前先通过pushTarget(this)将Dep.target关联到当前的Watcher实例对象，从而为当前属性的发布者dep添加订阅者。

再回头看一看整个流程，我们传入了data数据对象

  • 首先通过observe(data)，实例化一个Observer对象，其作用是通过defineReactive劫持对象属性描述符
  • 数据对象data的每一个属性值都有一个Dep实例，在属性的get中收集订阅者，在属性的set中通知订阅者
  • 在需要观察的数据属性的地方，实例化Watcher对象，在实例化的过程中，通过pushTarget(this)和一次this.getter.call(vm, vm)，触发dep.depend实现依赖的收集

可以看见，Dep对象充当联结Observer和watcher对象之间的桥梁。实际上，属性值的set描述符才是真正的发布者。

2.5. 单独处理的数组

列表渲染的文档中提到

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。

在JavaScript中，数组是一种特殊的对象，通过walk遍历对象属性的方法，并不能实现预期的依赖收集和更新通知，那么该如何检测数组本身的变化，诸如添加元素、移除元素呢？

Vue的做法是新建一个数组原型并重写相关方法

const augment = hasProto ? protoAugment : copyAugment
augment(value, arrayMethods, arrayKeys)

其中arrayMethods就是增强版的数组原型

// /src/core/observer/array.js
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
;[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach(function (method) {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    // ...
    // 在这里通知所有的订阅者
    ob.dep.notify()
  })
}

然后修改数组数据对象的原型，使其指向增强版的数组原型

if (Array.isArray(value)) {
    const augment = hasProto
    ? protoAugment
    : copyAugment
    // 如果是数据对象为数组，修改其原型为增强版的数组原型
    augment(value, arrayMethods, arrayKeys)
    this.observeArray(value)
} else {
    this.walk(value)
}

现在遍历数组，然后分别为每个数组元素均实例化Observer对象即可。

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

3. 小结

通过分析，现在对于Vue中的响应式系统有了一个更直观的了解~尽管仍旧忽略了不少实现细节。然后明白了其中的一些限制

  • Vue不能检测到对象属性的添加或删除，这是因为整个observer(data)是在初始化的时候对属性进行劫持的，解决这个问题的办法是通过Vue.set()这个API，或者创建一个包含原对象属性和新属性的新对象，通过赋值的形式
  • Vue无法检测到数组的长度变化，即this.arr[this.arr.length] = xxx无法触发更新。除非我们使用Vue实现的增强版数组原型方法才可以。

我们知道，响应式数据最大的好处就是在数据更新时自动更新视图，让开发者只需要关注数据本身。现在了解了整个响应式数据的原理，接下来就是了解Vue的视图渲染，以及数据更新时触发的视图更新。

世人的悲欢并不相通，我只是觉得他们吵闹。

Copyright © Shymean 2016 - 2024蜀ICP备2023029820号