The Composition API: Mental Models That Click

Reactivity is explicit now

With ref and reactive, you declare exactly which values Vue tracks. A ref wraps any value and exposes it through .value; reactive proxies an object whole. The practical guidance that has emerged: default to ref for everything, because it works uniformly for primitives and objects, survives destructuring patterns better, and makes the reactive boundary visible in code review. The .value you occasionally forget is the cost of that visibility.

Group by concern, not by kind

In a large Options component, one feature's logic smears across data, computed, methods, and watchers, and you scroll between all four to follow it. In composition style, everything about, say, pagination sits together: its state, its derived values, its handlers. When a concern grows, you cut that block and paste it into a composable, and the component shrinks without behavior changing.

Composables are the payoff

• A composable is a function using reactive primitives, nothing more; useCursorPosition, useCart, usePolling.
• They share stateful logic without mixins' name collisions or renderless-component gymnastics.
• They are testable in isolation, no component mounting required.

Write your first composable by extracting something small and real from an existing component, a debounced search, a form draft. The pattern teaches itself the first time you reuse one across two components and both stay readable.