Vue

When to Use

User needs Vue expertise — from Composition API patterns to production optimization. Agent handles reactivity, component design, state management, and performance.

Quick Reference

Composition API Philosophy

• Composition API is not about replacing Options API—it's about better code organization
• Group code by feature, not by option type—related logic stays together
• Extract reusable logic into composables—the main win of Composition API
• <script setup> is the recommended syntax—cleaner and better performance

Reactivity Traps

• ref for primitives—access with .value in script, auto-unwrapped in template
• reactive can't reassign whole object—state = {...} breaks reactivity
• Destructuring reactive loses reactivity—use toRefs(state) to preserve
• Array index assignment reactive in Vue 3—arr[0] = x works, unlike Vue 2
• Nested refs unwrap inside reactive—reactive({count: ref(0)}).count is number, not ref

Watch vs Computed

• computed for derived state—cached, recalculates only when dependencies change
• watch for side effects—when you need to DO something in response to changes
• computed should be pure—no side effects, no async
• watchEffect for immediate reaction with auto-tracked dependencies

Watch Traps

• Watching reactive object needs deep: true—or watch a getter function
• watch is lazy by default—use immediate: true for initial run
• Watch callback receives old/new—watch(source, (newVal, oldVal) => {})
• watchEffect can't access old value—use watch if you need old/new comparison
• Stop watchers with returned function—const stop = watch(...); stop()

Props and Emits Traps

• defineProps for type-safe props—defineProps<{ msg: string }>()
• Props are readonly—don't mutate, emit event to parent
• defineEmits for type-safe events—defineEmits<{ (e: 'update', val: string): void }>()
• v-model is :modelValue + @update:modelValue—custom v-model with defineModel()
• Default value for objects must be factory function—default: () => ({})

Template Ref Traps

• ref="name" + const name = ref(null)—names must match exactly
• Template refs available after mount—access in onMounted, not during setup
• ref on component gives component instance—ref on element gives DOM element
• Template ref with v-for becomes array of refs

Lifecycle Traps

• onMounted for DOM access—component mounted to DOM
• onUnmounted for cleanup—subscriptions, timers, event listeners
• onBeforeMount runs before DOM insert—rarely needed but exists
• Hooks must be called synchronously in setup—not inside callbacks or conditionals
• Async setup needs <Suspense> wrapper

Provide/Inject Traps

• provide('key', value) in parent—inject('key') in any descendant
• Reactive if value is ref/reactive—otherwise static snapshot
• Default value: inject('key', defaultVal)—third param for factory function
• Symbol keys for type safety—avoid string key collisions

Vue Router Traps

• useRoute for current route—reactive, use in setup
• useRouter for navigation—router.push('/path')
• Navigation guards: beforeEach, beforeResolve, afterEach—return false to cancel
• <RouterView> with named views—multiple views per route

Common Mistakes

• v-if vs v-show—v-if removes from DOM, v-show toggles display
• Key on v-for required—v-for="item in items" :key="item.id"
• Event modifiers order matters—.prevent.stop vs .stop.prevent
• Teleport for modals—<Teleport to="body"> renders outside component tree

Source: liu-bluesky/AI-Native — distributed by TomeVault.