Vue 3 Composition API

Introduced in Vue 3, with backwards compatibility with the older Options API.

Source: Vue School — “Composition API Fundamentals” (raw/vuejs/compostion api fundamentals by vueschool.md).

Reactive Data

• ref() makes any value reactive; Vue automatically updates the DOM parts that display it.
• Under the hood, ref() wraps the value in an object with a single .value property.
• {{ }} is Vue’s text-interpolation (mustache) syntax — a live link between JS and HTML. It can run JS expressions (math, logic, string methods) but cannot declare new variables.

List Rendering

• v-for="item in items" iterates a collection. Use :key to track each node’s identity so Vue correctly maps data to specific DOM elements.

User Input & Events

• v-model provides two-way data binding between an input element and a reactive state variable.
• v-on (shorthand @) listens to DOM events and runs JS — e.g. @keyup.enter, @click.

Methods

• Move inline logic into a method, e.g. saveItem().
• Access wrapped values with .value because JS tracks primitives by value, not reference — Vue wraps them in a Ref.
• .value is not needed inside <template>; Vue auto-unwraps refs there to keep HTML clean.

Primitives in JS are passed by value, not reference.

Open questions

• watch / computed — not covered in this source; add from a follow-up.
• Lifecycle hooks in <script setup> (onMounted, etc.).