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

Question

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

Тип вопроса: Vue Вероятность: 10% Категория: Frontend Разработчик

Ответ

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

Пример:

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Ключевые особенности:

Кэшируются (не пересчитываются при каждом обращении)
Реактивные (обновляются при изменении зависимостей)
Декларативные (описывают что, а не как)
Используются как обычные свойства (без вызова как методы)

Лучше использовать для сложных выражений или преобразований данных, которые требуют вычислений.

Ответ 18+ 🔞

Смотри, есть такая штука в Vue — вычисляемые свойства, или, как их умно называют, computed properties. Представь себе, что это как твой личный бухгалтер, который сидит и считает за тебя, но только когда реально нужно, а не каждый раз, когда ты моргнёшь.

Вот, допустим, у тебя есть firstName и lastName. И тебе постоянно нужно полное имя. Можно, конечно, в шаблоне писать {{ firstName + ' ' + lastName }}, но это же, блядь, несерьёзно. А если логика сложнее? Если нужно отформатировать, отфильтровать, наколдовать что-то? Вот тут-то и выходит на сцену наш герой.

Пишешь ты в компоненте вот такую хуйню:

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

И потом в шаблоне просто {{ fullName }}. Красота, да?

А теперь, внимание, фишка в чём: этот fullName — он не тупой метод, который будет дрочиться каждый раз, когда компонент перерисовывается. Он хитрожопый. Он смотрит: "Ага, firstName и lastName не поменялись? Ну и хуй с тобой, отдам тебе старое, закэшированное значение". А как только одна из этих сучек изменилась — вот тут он вздыхает, пересчитывает и кладёт новое значение в свой тайный карман.

Короче, главные плюсы:

Кэшируются, ёпта. Не тратят силы зря. Эффективность, блядь, наше всё.
Реактивные. Автоматически обновляются, когда их зависимости меняются. Сам всё чувствует, как кот сука собака.
Используются как свойства. Не надо вызывать как функцию fullName(), просто обращаешься к fullName. Удобно, ебать мои старые костыли.
Декларативные. Ты описываешь, что тебе нужно (полное имя), а не как его каждый раз получать. Vue сам разберётся.

Их надо юзать для любых преобразований данных, которые требуют хоть какой-то мозговой активности. Фильтрация списков, форматирование строк, агрегация каких-то значений — это всё их царство. Если видишь, что в шаблоне начинается ад из скобок и операторов — это верный знак, что пора выносить логику в computed свойство, а то ща читать этот пиздец будет невозможно.