Vue 3 Primer
Composition API, reactivity, and component patterns for shipping fast with Vue 3.
Reactivity Fundamentals
Vue 3 uses ref() and reactive() for state. Prefer ref for primitives; it auto-unwraps in templates but requires .value in script.
Composition API
<script setup> is the idiomatic entry point. Define props with defineProps, emits with defineEmits, and compose logic into reusable composables prefixed with use.
Watchers & Computed
computed() returns a cached derived ref. watch() observes reactive sources lazily; watchEffect()runs immediately and tracks dependencies automatically.
Lifecycle & Teleport
Hooks like onMounted and onUnmounted replace the Options API. Use <Teleport>to render content into a different DOM node — ideal for modals and overlays.
Pro tip: Extract shared state into composables that return refs. This keeps components thin and logic testable outside the Vue runtime.