Что такое вычисляемые свойства (computed) во Vue и для чего они нужны
Что проверяют
Понимаете ли вы, что главное отличие это кэширование, и различаете ли три похожих механизма.
Как отвечать
Вычисляемое свойство это значение, выведенное из другого реактивного состояния. Объявляется функцией, а используется как обычное свойство.
const fullName = computed(() => `${first.value} ${last.value}`);Главная особенность: кэширование по зависимостям. Значение вычисляется один раз и переиспользуется, пока не изменится что-то, от чего оно зависит. Обращение к нему сто раз в шаблоне вызовет функцию один раз.
Сравнение с двумя соседними механизмами и есть суть вопроса:
- метод вычисляется при каждом обращении. Десять использований в шаблоне это десять вызовов, а при любом обновлении компонента всё считается заново. Для дорогих вычислений вроде фильтрации и сортировки большого списка разница принципиальна;
- наблюдатель предназначен для побочных эффектов при изменении данных: отправить запрос, записать в хранилище, запустить анимацию. Он ничего не возвращает.
Отсюда правило выбора: нужно получить значение из существующих данных, значит вычисляемое свойство; нужно сделать действие в ответ на изменение, значит наблюдатель.
Что важно соблюдать: функция вычисления должна быть чистой. Никаких запросов, изменения других данных и обращений к хранилищу внутри. Иначе поведение становится непредсказуемым, потому что момент пересчёта определяет система реактивности, а не вы.
Полезная деталь: вычисляемое свойство может иметь и установщик значения, что удобно для двусторонней привязки к производному значению, например к полю ввода, разбираемому на части.
Зависимости отслеживаются автоматически по фактическому обращению во время вычисления. Отсюда неочевидное следствие: если внутри есть условие, и в текущем проходе вторая ветка не выполнялась, её зависимости не отслеживаются, пока условие не изменится.
Где спотыкаются
Используют метод там, где нужен кэш, и пересчитывают тяжёлый список на каждый рендер.
Делают побочные эффекты внутри вычисляемого свойства.
Берут наблюдателя для получения производного значения.
Не знают, что зависимости определяются по фактическому обращению.