Итоги

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

• У компонента есть жизненный цикл: он создаётся (выполняется его <script setup>), монтируется (его элементы помещаются на страницу), обновляется (после каждого изменения его состояния) и размонтируется (убирается со страницы, например через v-if, а вместе с ним и его состояние).
• Хуки жизненного цикла запускают ваш код в эти моменты: onMounted(() => { … }), onUpdated() и onUnmounted(); их импортируют из "vue" и вызывают в начале <script setup>.
• Данные из файла загружают в onMounted с помощью async-функции, fetch() и response.json(). Реф вроде loading позволяет шаблону пока показывать Загрузка…. Никогда не ставьте await в начало <script setup>: тогда компонент ничего не покажет.
• response.ok равно false, когда сервер ответил ошибкой, например 404 Not Found при неверном названии файла. Проверяйте его и показывайте сообщение об ошибке вместо данных.
• Что компонент запустил, то он и останавливает: интервал, запущенный в onMounted, останавливают в onUnmounted через clearInterval(). Иначе он продолжит работать и после того, как компонента не станет.
• Реф шаблона даёт вам элемент шаблона: ref="search" в шаблоне и const search = useTemplateRef("search"); в скрипте. search.value — это элемент после монтирования компонента и null до него.
• То, что сохранено в localStorage, читают при создании рефа, потому что он отвечает сразу, а watch сохраняет значение при каждом изменении.

В следующем уроке, «Композаблы», вы вынесете код вроде загрузки меню из компонентов в отдельные функции, которыми сможет пользоваться любой компонент.

Но сначала потренируйтесь на странице отзывов кафе: она загружает то, что написали гости, ставит курсор в поле для вашего отзыва и сохраняет написанное, даже если закрыть страницу.