Мы продолжаем нашу серию «Основы Vue.js». На этом этапе мы начинаем отходить от основополагающих концепций и начинаем рассматривать некоторые интересные функции, которые Vue предлагает при разработке ваших приложений. Продолжая с того места, где мы остановились, говоря о шаблонных выражениях, что, если вы усложните сам шаблон? Может быть, например, вы хотели отобразить сообщение в обратном порядке. Вы можете написать что-то вроде этого:

<div id=”message”>
 {{ message.split(‘’).reverse().join(‘’) }}
</div>

Большинство разработчиков после внимательного изучения увидят, что это действительно переворачивает строку для отображения сообщения в обратном порядке, НО с первого взгляда это не совсем понятно. Благодаря сложной логике Vue.js позволяет нам использовать вычисляемое свойство.

Вычисляемые свойства

Что именно? Сначала рассмотрим пример.

//TEMPLATE
<div id=”message”>
 <p>Original message: “{{ message }}”</p>
 <p>Computed reversed message: “{{ reversedMessage }}”</p>
</div>
//VUE INSTANCE
var vm = new Vue({
 el: ‘#example’,
 data: {
   message: ‘Hello’
 },
 computed: {
   reversedMessage: function () {
     return this.message.split(‘’).reverse().join(‘’)
   }
 }
})

Над экземпляром Vue находится шаблон, который просто содержит имена переменных вычисляемых свойств. В экземпляре Vue мы объявляем вычисляемое свойство с ключевым словом «computed» с именем «reversedMessage», которое содержит логику для реверсирования сообщения. Прелесть объявления this в экземпляре Vue заключается в том, что мы можем использовать его в любое время и в любом месте, просто используя имя свойства «reversedMessage».

Вы можете получить доступ к этому свойству в консоли, чтобы протестировать его, используя «vm.reversedMessage». Еще одна интересная вещь заключается в том, что Vue понимает в этом случае, что «reversedMessage» зависит от «сообщения», что означает, что Vue обновит «reversedMessage», если «сообщение» изменится. И самое приятное то, что она создана таким образом, что отношение зависимости является декларативным: вычисляемая функция-геттер не имеет побочных эффектов, что упрощает ее тестирование и понимание.

Есть и другой способ добиться того же результата, используя методы, а не вычисляемые свойства. Давайте посмотрим на пример:

//TEMPLATE
<p>Reversed message: “{{ reverseMessage() }}”</p>
//VUE INSTANCE
methods: {
 reverseMessage: function () {
   return this.message.split(‘’).reverse().join(‘’)
 }
}

Большая разница здесь в том, что вычисляемые свойства кэшируются на основе их реактивных зависимостей. В приведенном выше примере, если сообщение не изменяется, reversedMessage всегда будет возвращать ранее вычисленный результат даже из нескольких точек доступа, БЕЗ необходимости повторного запуска функции.

Но что, если мы хотим, чтобы эта функция вызывалась снова? Что, если мы хотим, чтобы эта функция вызывалась каждый раз при изменении значения? Вот когда мы используем методы. Возьмите это, например:

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

Vs

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

Вычисляемое свойство НЕ будет обновлять значение «сейчас», потому что функция не вызывается снова, а будет отображаться ранее кэшированное значение. Для сравнения, вызов метода всегда будет запускать функцию всякий раз, когда происходит повторный рендеринг.

Так зачем тогда кешировать? Зачем использовать вычисляемые свойства? Что ж, представьте, что у нас есть дорогостоящая функция, которая должна перебирать большое количество значений в массиве? Мы не хотим выполнять эту функцию много раз, особенно если от нее зависит множество других вычисляемых свойств.

Это все на данный момент. В следующий раз мы посмотрим на Watchers!