Summary

In this lesson, you learned that:

• Vue renders the template again only when reactive data changes. A plain variable can change, but the page won't show it.
• ref(), imported with import { ref } from "vue";, makes reactive state: const count = ref(0);. Refs are always const: the ref stays the same, its value changes.
• In the script, the value is count.value. In the template, Vue unwraps refs, so it's just count. count++ in the script ends with TypeError: Assignment to constant variable., and {{ count.value }} in the template shows nothing.
• @click is short for v-on:click. Its value is a function's name, a call with arguments such as addToOrder('Espresso'), which Vue runs on the click, not at once, or a short statement such as count++. Anything longer goes into a function in the script.
• A handler named without parentheses gets the event object. When you pass arguments of your own, the event object is $event.
• @ works with any event: @input and event.target.value for typing (with :value to put a ref into the field), @keydown.enter for Enter, and @mouseover and @mouseleave for the mouse.
• A ref can hold an array or an object. push(), pop(), splice() and changes of properties such as order.value.note = "No sugar" all update the page, and so does a new array for .value, for example from filter().

In the next lesson, Conditions and Lists, you'll show parts of the page only when a condition holds, and draw a list from an array, with an element for each item.

But first, a little practice: a waiting list for the café's tables. App.vue has only the heading, and you'll write the rest yourself.