手写实现Vue计算属性

<div id="app">
  {{fullName}}
</div>
<script>
  const vm = new Vue({
    data () {
      return {
        firstName: 'Foo',
        lastName: 'Bar'
      };
    },
    computed: {
      fullName () {
        return this.firstName + this.lastName;
      }
    }
  });
</script>

function initState (vm) {
  const options = vm.$options;
  // some code ...
  if (options.computed) {
    initComputed(vm);
  }
}

function initComputed (vm) {
  const { computed } = vm.$options;
  // 将计算属性watcher存储到vm._computedWatchers属性中，之后方法直接通过实例vm来获取
  const watchers = vm._computedWatchers = {};
  for (const key in computed) {
    if (computed.hasOwnProperty(key)) {
      const userDef = computed[key];
      // 计算属性key的值有可能是对象，在对象中会设置它的get set 方法
      const getter = typeof userDef === 'function' ? userDef : userDef.get;
      // 为每一个计算属性创建一个watcher
      watchers[key] = new Watcher(vm, getter, () => {}, { lazy: true });
      // 将计算属性的key添加到实例vm上
      defineComputed(vm, key, userDef);
    }
  }
}

new Vue({
    // ...
    computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
  }
  //...  
)

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
};

function defineComputed (target, key, userDef) {
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = createComputedGetter(key);
  } else {
    sharedPropertyDefinition.get = createComputedGetter(key);
    // 如果是对象，用户会传入set方法
    sharedPropertyDefinition.set = userDef.set;
  }
  Object.defineProperty(target, key, sharedPropertyDefinition);
}

// 创建Object.defineProperty的get函数
function createComputedGetter (key) {
  return function () {
    // 通过之前保存的_computedWatchers来取到对应的计算属性watcher
    const watcher = this._computedWatchers[key];
    if (watcher.dirty) {
      // 只有在dirty为true的时候才会重新执行计算属性
      watcher.evaluate();
      if (Dep.target) {
        // 此时，如果栈中有渲染watcher,会为当前计算属性watcher中收集的所有dep再收集渲染watcher
        // 在watcher收集的dep对应的属性(this.firstName,this.lastName)更新后，通知视图更新，从而更新页面中的计算属性
        watcher.depend();
      }
    }
    return watcher.value;
  };
}

import { popTarget, pushTarget } from './dep';
import { nextTick } from '../shared/next-tick';
import { traverse } from './traverse';
let id = 0;
class Watcher {
  constructor (vm, exprOrFn, cb, options = {}) {
    // some code ...
    // 设置dirty的初始值为false
    this.lazy = options.lazy;
    this.dirty = this.lazy;
    if (typeof exprOrFn === 'function') {
      this.getter = this.exprOrFn;
    }
    // some code ...
    // 初始化时计算属性的getter不会执行，用到的时候才会执行
    this.value = this.lazy ? undefined : this.get();
  }
  // 执行传入的getter函数进行求值，将其赋值给this.value
  // 求值完毕后，将dirty置为false，下次将不会再重新执行求值函数
  evaluate () {
    this.value = this.get();
    this.dirty = false;
  }
  // 为watcher中的dep，再收集渲染watcher
  depend () {
    this.deps.forEach(dep => dep.depend());
  }
  get () {
    pushTarget(this);
    const value = this.getter.call(this.vm);
    if (this.deep) {
      traverse(value);
    }
    popTarget();
    return value;
  }
  update () {
    if (this.lazy) { // 依赖的值更新后，只需要将this.dirty设置为true
      // 之后获取计算属性的值时会再次执行evaluate来执行this.get()方法
      this.dirty = true;
    } else {
      queueWatcher(this);
    }
  }

  // some code ...
}

vm.firstName = 'F'