根据调试工具看Vue源码之computed（一）

官方定义

• 类型：{ [key: string]: Function | { get: Function, set: Function } }
• 详细：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例...

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

上面这几段话其实可以归纳为以下几点：

• computed是计算属性，会被混入到Vue实例中
• computed的结果会被缓存，除非依赖的响应式属性变化才会重新计算

如何初始化computed？

同以往一样，先新建一个Vue项目，同时加入以下代码：

export default {
  name: 'test',
  data () {
    return {
      app: 666
    }
  },
  created () {
    console.log('app proxy -->', this.appProxy)
  },
  computed () {
    appProxy () {
      debugger
      return this.app
    }
  }
}

F12打开调试界面，刷新后断点停在了debugger的位置，同时可以看到右边的调用栈：

• appProxy
• get
• evaluate
• computedGetter
• created
• ...

瞥到computedGetter之后，点进去，可以看到：

function createComputedGetter (key) {
  return function computedGetter () {
    var watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate();
      }
      if (Dep.target) {
        watcher.depend();
      }
      return watcher.value
    }
  }
}

看到这里不禁一脸懵逼