Composition API

Composition API organizes component logic in `setup()` (or `<script setup>`) with explicit imports: `ref`, `reactive`, `computed`, `watch`, lifecycle hooks, and composables that extract reusable behavior.

					<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>
				

Composables (`useX`) group state and effects by feature instead of by option type — useful for large components and shared logic across routes.

On interviews: contrast with Options API for readability in large teams, tree-shaking benefits, and TypeScript inference with `<script setup>`.

Common pitfalls: destructuring reactive objects (loses reactivity), forgetting `.value` on refs in script, and composables that hide side effects without documenting lifecycle.

The trade-off is explicitness and reuse versus familiarity for developers from Options-only codebases.

Checklist:

• Prefer `<script setup>` for ergonomics.
• Extract composables by feature boundary.
• Return readonly state from composables when exposing.
• Document which composable owns subscriptions.