Vue Framework

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable and focuses on the view layer, making it easy to integrate with other libraries or existing projects.

The Vue reactivity system automatically tracks dependencies and updates the DOM when reactive state changes. In Vue 3, it uses Proxy objects (instead of Object.defineProperty in Vue 2) to intercept get/set operations on reactive data.

Use reactive() from the Composition API:
import { reactive } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
This returns a deeply reactive proxy of the original object.

ref() wraps a single value (primitive or object) and requires .value to access it in script. reactive() wraps an object and provides direct property access.
const count = ref(0) // count.value
const state = reactive({ count: 0 }) // state.count

The Composition API is a set of function-based APIs (ref, reactive, computed, watch, lifecycle hooks) that allow organizing component logic by feature rather than by option type. It is used inside setup() or <script setup>.

The Options API organizes component logic into predefined options:data() — reactive statemethods — functionscomputed — derived valueswatch — side effectsmounted(), etc. — lifecycle hooks

<script setup> is a compile-time syntactic sugar for the Composition API. Top-level bindings (variables, functions, imports) are automatically exposed to the template. It reduces boilerplate by eliminating the need to return values from setup().

v-if conditionally renders an element based on a truthy expression. The element is completely destroyed and recreated when the condition toggles:
<p v-if="isVisible">Shown</p>
Use with v-else-if and v-else for multiple conditions.

v-if completely adds/removes the element from the DOM (higher toggle cost). v-show always keeps the element in the DOM and toggles its CSS display property (higher initial render cost).
Use v-show for frequent toggling, v-if for conditions that rarely change.

v-for renders a list of items by iterating over an array or object:
<li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
A unique :key attribute is required for efficient DOM patching.

v-bind dynamically binds an HTML attribute or component prop to an expression:
<img v-bind:src="imageUrl">
Shorthand: <img :src="imageUrl">
It can also bind multiple attributes at once using an object: v-bind="attrObject".

v-model creates a two-way binding between a form input and reactive data:
<input v-model="message">
It is syntactic sugar for :value="message" combined with @input="message = $event.target.value".