Итоги

В этом уроке вы узнали, что:

• computed(() => …) создаёт вычисляемое значение из других значений: сумму, отфильтрованный или отсортированный список, «да» или «нет». Функция возвращает значение, а Vue вычисляет его заново, когда меняется любой реф, который она читает.
• В шаблоне вычисляемое значение пишут по имени, {{ total }}; в скрипте — с .value, в том числе внутри другого вычисляемого значения. Без .value получается объект: [object Object] в тексте и сравнения, которые никогда не выполняются.
• Вычисляемому значению ничего нельзя присвоить; меняйте то, из чего оно вычисляется. computed, как ref и watch, нужно указать в строке import.
• Вычисляемое значение лучше функции, которую вызывает шаблон: оно читается как значение, и Vue запоминает его, а не вычисляет заново при каждой отрисовке шаблона. sort() переставляет элементы массива, который сортирует, поэтому сортируйте копию: [...menu].sort(…).
• watch(source, (newValue, oldValue) => { … }) что-то делает после того, как источник — реф или вычисляемое значение — изменился: сохраняет значение в localStorage, выводит его и так далее. При запуске приложения он не срабатывает.
• { deep: true } позволяет наблюдателю видеть изменения внутри массива или объекта, например push() или item.count++. Без неё наблюдатель замечает только новое .value.
• { immediate: true } запускает наблюдатель один раз ещё и при старте приложения. watchEffect() запускается сразу и следит за каждым рефом, который читает.
• Вычисляемые значения нужны для значений, которые показывают, наблюдатели — для действий.

В следующем уроке, «Мини-проект: Учёт бюджета», вы примените всё это в собственном приложении: бюджете на месяц, который складывает ваши траты и запоминает их.

А пока немного практики: отзыв о кафе, у которого ограничена длина — счётчик оставшихся символов уменьшается по мере ввода, — и черновик, который остаётся после «Запустить».