<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的值有可能是對象，在對象中會設(shè)置它的get set 方法
      const getter = typeof userDef === 'function' ? userDef : userDef.get;
      // 為每一個計算屬性創(chuàng)建一個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);
}

// 創(chuàng)建Object.defineProperty的get函數(shù)
function createComputedGetter (key) {
  return function () {
    // 通過之前保存的_computedWatchers來取到對應(yīng)的計算屬性watcher
    const watcher = this._computedWatchers[key];
    if (watcher.dirty) {
      // 只有在dirty為true的時候才會重新執(zhí)行計算屬性
      watcher.evaluate();
      if (Dep.target) {
        // 此時，如果棧中有渲染watcher,會為當(dāng)前計算屬性watcher中收集的所有dep再收集渲染watcher
        // 在watcher收集的dep對應(yīng)的屬性(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 ...
    // 設(shè)置dirty的初始值為false
    this.lazy = options.lazy;
    this.dirty = this.lazy;
    if (typeof exprOrFn === 'function') {
      this.getter = this.exprOrFn;
    }
    // some code ...
    // 初始化時計算屬性的getter不會執(zhí)行，用到的時候才會執(zhí)行
    this.value = this.lazy ? undefined : this.get();
  }
  // 執(zhí)行傳入的getter函數(shù)進(jìn)行求值，將其賦值給this.value
  // 求值完畢后，將dirty置為false，下次將不會再重新執(zhí)行求值函數(shù)
  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設(shè)置為true
      // 之后獲取計算屬性的值時會再次執(zhí)行evaluate來執(zhí)行this.get()方法
      this.dirty = true;
    } else {
      queueWatcher(this);
    }
  }

  // some code ...
}

vm.firstName = 'F'