Работа с вычисляемыми свойствами в фреймворке Vue

Если одно и то же свойство выводится в нескольких местах и каждый раз при выводе мы применяем фильтр, это может быть не очень оптимальным с точки зрения производительности.

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

Избежать лишних операций можно с помощью так называемых вычисляемых свойств.

Эти свойства работают также, как и обычные отличаются тем, что они не присутствуют в data изначально а вычисляются в процессе работы скрипта.

Давайте посмотрим на практическом примере.

Пусть у нас есть свойство message, в котором хранится некоторая строка-сообщение. Давайте сделаем вычисляемое свойство reversedMessage, в котором будет хранится это же сообщение, но в перевернутом виде.

Для начала давайте сделаем функцию, которая будет выполнять переворот свойства message:

reversedMessage: function() {
return this.message.split('').reverse().join('');
}
Разместим теперь нашу функцию в настройке computed, предназначенной для создания вычисляемых свойств:

let app = new Vue({
el: '#app',
data: {
// Наше сообщение:
message: 'hello',
},
computed: {
// Перевернутое сообщение:
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
});
То есть: обычные свойства хранятся в настройке data и представляют собой некоторые данные (числа, строки, массивы и тп), а вычисляемые свойства хранятся в настройке computed и представляют собой функции.

Давайте теперь посмотрим, как мы будем пользоваться нашими свойствами:

<div id="app">
<p>Изначальное сообщение: {{ message }}</p>
<p>Сообщение задом наперед: {{ reversedMessage }}</p>
</div>
Как вы видите, в шаблоне нет разницы между обычными свойствами и вычисляемыми. В этом особое удобство использования вычисляемых свойств.

Итак, давайте соберем весь код вместе и запустим:

let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
});
<div id="app">
<p>Изначальное сообщение: {{ message }}</p>
<p>Сообщение задом наперед: {{ reversedMessage }}</p>
</div>
После запуска кода в первый абзац выведется наше сообщение, а во второй - оно же, но в перевернутом виде.

Реактивность
Давайте сделаем так, чтобы наше сообщение message не было изначально задано в data, а было привязано к инпуту и по мере ввода выводилось в абзац под этим инпутом:

let app = new Vue({
el: '#app',
data: {
message: '',
},
});
<div id="app">
<input v-model="message">
<p>Вводимое сообщение: {{ message }}</p>
</div>
Добавим теперь и вычисляемое свойство reversedMessage и также выведем его в абзац:

let app = new Vue({
el: '#app',
data: {
message: '',
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
});
<div id="app">
<input v-model="message">
<p>Вводимое сообщение: {{ message }}</p>
<p>Сообщение задом наперед: {{ reversedMessage }}</p>
</div>
В результате, если запустить приведенный код и начать вводить данные в инпут, то в первом абзаце сразу же будут появляться введенная строка, а во втором - эта же строка в перевернутом виде.