Vue 3 Composition API

Composition API: the Options API forces you to split a feature's code into separate data, methods, and watch sections. Composition API lets you group a feature's state and logic together and extract it into reusable composables.

ref vs reactive: ref(0) returns { value: 0 } and unwraps automatically in templates. reactive({ count: 0 }) proxies the object directly. Primitives require ref; complex objects work with either.

Composable: a function (conventionally prefixed use) that calls ref, computed, or lifecycle hooks to bundle reusable behavior, e.g. useMouse() tracking cursor position.

computed(): similar to a computed property in Options API. It tracks reactive dependencies automatically and only re-evaluates when they change, preventing unnecessary recalculation on unrelated state updates.

watchEffect: executes the callback right away, collecting reactive dependencies as it runs. watch is explicit about which source to observe and fires only on change, giving more control over old/new value comparison.