Итоги

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

• Vue заново отрисовывает шаблон, только когда меняются реактивные данные. Обычная переменная может измениться, но страница этого не покажет.
• ref(), подключённый строкой import { ref } from "vue";, создаёт реактивное состояние: const count = ref(0);. Рефы всегда объявляют через const: реф остаётся тем же, меняется его значение.
• В скрипте значение — это count.value. В шаблоне Vue распаковывает рефы, так что там просто count. count++ в скрипте заканчивается ошибкой TypeError: Assignment to constant variable., а {{ count.value }} в шаблоне ничего не показывает.
• @click — сокращение от v-on:click. Его значение — имя функции, вызов с аргументами вроде addToOrder('Эспрессо'), который Vue выполняет при клике, а не сразу, или короткая инструкция вроде count++. Всё, что длиннее, уходит в функцию в скрипте.
• Обработчик, названный без скобок, получает объект события. Когда вы передаёте свои аргументы, объект события доступен как $event.
• @ работает с любым событием: @input и event.target.value для ввода текста (а :value кладёт реф в поле), @keydown.enter для Enter, @mouseover и @mouseleave для мыши.
• Реф может хранить массив или объект. push(), pop(), splice() и изменения свойств вроде order.value.note = "Без сахара" обновляют страницу, как и новый массив в .value, например из filter().

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

Но сначала немного практики: список ожидания на столики кафе. В App.vue есть только заголовок, а остальное вы напишете сами.