Кеширование вычисляемых свойств

Можно заметить, что такого же результата можно достичь и с помощью метода:

<p>Сообщение задом наперёд: «{{ reverseMessage() }}»</p>

// в компоненте
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

Вместо вычисляемого свойства, можно использовать ту же самую функцию в качестве метода. С точки зрения конечного результата, оба подхода делают одно и то же. Но есть важное отличие: вычисляемые свойства кэшируются, основываясь на своих реактивных зависимостях. Вычисляемое свойство пересчитывается лишь тогда, когда изменится одна из его реактивных зависимостей. Поэтому, пока message остаётся неизменным, многократное обращение к reversedMessage будет каждый раз возвращать единожды вычисленное значение, не запуская функцию вновь.

Обратите внимание, что следующее вычисляемое свойство никогда не обновится, поскольку Date.now() не является реактивной зависимостью:

computed: {
  now: function () {
    return Date.now()
  }
}

Использование метода, напротив, будет запускать функцию всегда, при каждом обращении к нему.

Зачем нужно кеширование? Представьте, есть «дорогое» вычисляемое свойство A, требующее цикла по огромному массиву и выполняющее множество вычислений. И пусть ещё будут другие вычисляемые свойства, в свою очередь, зависящие от A. Без кэширования геттер A будет запускаться куда чаще необходимого! В тех же случаях, когда кэширования нужно избежать — используйте методы.