Last Updated: May 2, 2026
Advanced Vue.js patterns: composition API, custom composables, provide/inject, teleport, suspense, and performance optimization with shallowRef and v-memo.
Composition API Patterns
| Pattern | Description |
|---|---|
ref() | Reactive primitive for primitives — wraps value in .value |
reactive() | Deeply reactive proxy for objects and arrays |
computed() | Cached derived state, auto-tracks dependencies |
watch() | Explicit dependency watching with old/new values |
watchEffect() | Auto-tracked side effect, runs immediately |
Custom Composables
useFetch(url)Encapsulate fetch logic with loading, error, and data refs.
useLocalStorage(key, default)Sync reactive state with localStorage — persist automatically.
useDebounce(value, delay)Debounce a ref value for search inputs.
Teleport & Suspense
| Feature | Description |
|---|---|
<Teleport to="body"> | Render children into different DOM node — perfect for modals |
<Suspense> | Coordinate async dependencies — shows fallback while children resolve |
#fallback slot | Loading state shown during async resolution |
Performance Optimization
| Technique | When to Use |
|---|---|
v-memo | Skip re-render if dependency array unchanged |
shallowRef | Large objects where only reference tracking needed |
defineAsyncComponent | Lazy-load heavy components |
Pro Tip: Use Symbol keys for provide/inject to avoid string collisions across large component trees.