Объект computed и вычисляемые свойства в Vue

Можно задавать свойства, которые будут реактивно вычисляться на основе других свойств. Такие свойства называются вычисляемыми. Они располагаются в настройке computed.

Объект computed это специальный тип свойства компонента, которое возвращает значение, вычисляемое на основе других реактивных данных. Такие свойства не хранят значения, а вычисляют их.

Когда использовать вычисляемые свойства

1. Формирование значений для отображения на основе других реактивных свойств
2. Лёгкие преобразования данных перед их использованием в шаблонах
3. Динамическое обрезание, фильтрация, группировка массивов на основе состояния интерфейса
4. Кэширование результатов дорогих вычислений между рендерами, чтобы не перегружать приложение

Принцип работы

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

Синтаксис

Пусть в свойствах хранится имя и фамилия юзера:

App.vuedata()
{
    return {
        name: 'john',
        surn: 'smit',
    }
}

Давайте сделаем свойствоfull, которое будет содержать полное имя с фамилией:

App.vuecomputed: {
    full: function () {
        return this.name + ' ' + this.surn;
    }
}

Выведем в представлении содержимое наших свойств:

App.vue<template>
<p>{{ name }}</p>
<p>{{ surn }}</p>
<p>{{ full }}</p>
</template>