深入理解 Vue Computed 计算属性

8 minute read

Computed 计算属性是 Vue 中常用的一个功能,但你理解它是怎么工作的吗?

拿官网简单的例子来看一下:

1<div id="example">
2  <p>Original message: "{{ message }}"</p>
3  <p>Computed reversed message: "{{ reversedMessage }}"</p>
4</div>
 1var vm = new Vue({
 2  el: '#example',
 3  data: {
 4    message: 'Hello',
 5  },
 6  computed: {
 7    // a computed getter
 8    reversedMessage: function () {
 9      // `this` points to the vm instance
10      return this.message.split('').reverse().join('');
11    },
12  },
13});

Situation

Vue 里的 Computed 属性非常频繁的被使用到,但并不是很清楚它的实现原理。比如:计算属性如何与属性建立依赖关系?属性发生变化又如何通知到计算属性重新计算?

关于如何建立依赖关系,我的第一个想到的就是语法解析,但这样太浪费性能,因此排除,第二个想到的就是利用 JavaScript 单线程的原理和 Vue 的 Getter 设计,通过一个简单的发布订阅,就可以在一次计算属性求值的过程中收集到相关依赖。

因此接下来的任务就是从 Vue 源码一步步分析 Computed 的实现原理。

Task

分析依赖收集实现原理,分析动态计算实现原理。

Action

data 属性初始化 getter setter:

 1// src/observer/index.js
 2
 3// 这里开始转换 data 的 getter setter,原始值已存入到 __ob__ 属性中
 4Object.defineProperty(obj, key, {
 5  enumerable: true,
 6  configurable: true,
 7  get: function reactiveGetter () {
 8    const value = getter ? getter.call(obj) : val
 9    // 判断是否处于依赖收集状态
10    if (Dep.target) {
11      // 建立依赖关系
12      dep.depend()
13      ...
14    }
15    return value
16  },
17  set: function reactiveSetter (newVal) {
18    ...
19    // 依赖发生变化,通知到计算属性重新计算
20    dep.notify()
21  }
22})

computed 计算属性初始化

 1// src/core/instance/state.js
 2
 3// 初始化计算属性
 4function initComputed (vm: Component, computed: Object) {
 5  ...
 6  // 遍历 computed 计算属性
 7  for (const key in computed) {
 8    ...
 9    // 创建 Watcher 实例
10    // create internal watcher for the computed property.
11    watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions)
12
13    // 创建属性 vm.reversedMessage,并将提供的函数将用作属性 vm.reversedMessage 的 getter,
14    // 最终 computed 与 data 会一起混合到 vm 下,所以当 computed 与 data 存在重名属性时会抛出警告
15    defineComputed(vm, key, userDef)
16    ...
17  }
18}
19
20export function defineComputed (target: any, key: string, userDef: Object | Function) {
21  ...
22  // 创建 get set 方法
23  sharedPropertyDefinition.get = createComputedGetter(key)
24  sharedPropertyDefinition.set = noop
25  ...
26  // 创建属性 vm.reversedMessage,并初始化 getter setter
27  Object.defineProperty(target, key, sharedPropertyDefinition)
28}
29
30function createComputedGetter (key) {
31  return function computedGetter () {
32    const watcher = this._computedWatchers && this._computedWatchers[key]
33    if (watcher) {
34      if (watcher.dirty) {
35        // watcher 暴露 evaluate 方法用于取值操作
36        watcher.evaluate()
37      }
38      // 同第1步,判断是否处于依赖收集状态
39      if (Dep.target) {
40        watcher.depend()
41      }
42      return watcher.value
43    }
44  }
45}

无论是属性还是计算属性,都会生成一个对应的 watcher 实例。

 1// src/core/observer/watcher.js
 2
 3// 当通过 vm.reversedMessage 获取计算属性时,就会进到这个 getter 方法
 4get () {
 5  // this 指的是 watcher 实例
 6  // 将当前 watcher 实例暂存到 Dep.target,这就表示开启了依赖收集任务
 7  pushTarget(this)
 8  let value
 9  const vm = this.vm
10  try {
11    // 在执行 vm.reversedMessage 的函调函数时,会触发属性(步骤1)和计算属性(步骤2)的 getter
12    // 在这个执行过程中,就可以收集到 vm.reversedMessage 的依赖了
13    value = this.getter.call(vm, vm)
14  } catch (e) {
15    if (this.user) {
16      handleError(e, vm, `getter for watcher "${this.expression}"`)
17    } else {
18      throw e
19    }
20  } finally {
21    if (this.deep) {
22      traverse(value)
23    }
24    // 结束依赖收集任务
25    popTarget()
26    this.cleanupDeps()
27  }
28  return value
29}

上面多出提到了 dep.depend, dep.notify, Dep.target,那么 Dep 究竟是什么呢?

Dep 的代码短小精悍,但却承担着非常重要的依赖收集环节。

 1// src/core/observer/dep.js
 2
 3export default class Dep {
 4  static target: ?Watcher;
 5  id: number;
 6  subs: Array<Watcher>;
 7
 8  constructor() {
 9    this.id = uid++;
10    this.subs = [];
11  }
12
13  addSub(sub: Watcher) {
14    this.subs.push(sub);
15  }
16
17  removeSub(sub: Watcher) {
18    remove(this.subs, sub);
19  }
20
21  depend() {
22    if (Dep.target) {
23      Dep.target.addDep(this);
24    }
25  }
26
27  notify() {
28    const subs = this.subs.slice();
29    for (let i = 0, l = subs.length; i < l; i++) {
30      // 更新 watcher 的值,与 watcher.evaluate() 类似,
31      // 但 update 是给依赖变化时使用的,包含对 watch 的处理
32      subs[i].update();
33    }
34  }
35}
36
37// 当首次计算 computed 属性的值时,Dep 将会在计算期间对依赖进行收集
38Dep.target = null;
39const targetStack = [];
40
41export function pushTarget(_target: Watcher) {
42  // 在一次依赖收集期间,如果有其他依赖收集任务开始(比如:当前 computed 计算属性嵌套其他 computed 计算属性),
43  // 那么将会把当前 target 暂存到 targetStack,先进行其他 target 的依赖收集,
44  if (Dep.target) targetStack.push(Dep.target);
45  Dep.target = _target;
46}
47
48export function popTarget() {
49  // 当嵌套的依赖收集任务完成后,将 target 恢复为上一层的 Watcher,并继续做依赖收集
50  Dep.target = targetStack.pop();
51}

Result

总结一下依赖收集、动态计算的流程:

1. data 属性初始化 getter setter
2. computed 计算属性初始化,提供的函数将用作属性 vm.reversedMessage 的 getter
3. 当首次获取 reversedMessage 计算属性的值时,Dep 开始依赖收集
4. 在执行 message getter 方法时,如果 Dep 处于依赖收集状态,则判定 message 为 reversedMessage 的依赖,并建立依赖关系
5. 当 message 发生变化时,根据依赖关系,触发 reverseMessage 的重新计算

到此,整个 Computed 的工作流程就理清楚了。

Vue 是一个设计非常优美的框架,使用 Getter Setter 设计使依赖关系实现的非常顺其自然,使用计算与渲染分离的设计(优先使用 MutationObserver,降级使用 setTimeout)也非常贴合浏览器计算引擎与排版引擎分离的的设计原理。

如果你想成为一名架构师,不能只停留在框架的 API 使用层面。