API

computed

Тип: { [key: string]: Function | { get: Function, set: Function } }

Подробности:

Вычисляемые свойства, которые будут подмешаны к экземпляру Vue. В геттерах и сеттерах this будет указывать на экземпляр Vue.

Обратите внимание, при использовании стрелочной функции в определении вычисляемого свойства, this не будет указывать на экземпляр компонента, но к нему можно получить доступ из первого аргумента функции:

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

Вычисляемые свойства кэшируются и повторно вычисляются только при изменении реактивных зависимостей. Обратите внимание, если определённая зависимость выходит за область видимости экземпляра (т.е не реактивная), то вычисляемое свойство не будет обновляться.

Пример:

const vm = new Vue({
  data: { a: 1 },
  computed: {
    // если свойство только возвращает данные, достаточно простой функции:
    aDouble: function () {
      return this.a * 2
    },
    // свойство и возвращает, и получает данные:
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4