computed

  • 类型：{ [key: string]: Function | { get: Function, set: Function } }

  • 详细：

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

  1. computed: {
  2.   aDouble: vm => vm.a * 2
  3. }

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

  • 示例：
  1. var vm = new Vue({
  2.   data: { a: 1 },
  3.   computed: {
  4.     // 仅读取
  5.     aDouble: function () {
  6.       return this.a * 2
  7.     },
  8.     // 读取和设置
  9.     aPlus: {
  10.       get: function () {
  11.         return this.a + 1
  12.       },
  13.       set: function (v) {
  14.         this.a = v - 1
  15.       }
  16.     }
  17.   }
  18. })
  19. vm.aPlus   // => 2
  20. vm.aPlus = 3
  21. vm.a       // => 2
  22. vm.aDouble // => 4