vue

vue

Composition API is the standard for Vue 3 apps.

Core Concepts

• Composition API: setup(), ref for primitives, reactive for objects, computed, watch
• SFC structure: <template>, <script setup>, <style scoped> per component
• Reactivity system: proxy-based tracking, automatic dependency collection

Common Patterns

• v-if/v-else for conditional rendering, v-for with :key for lists
• v-model for two-way binding on form inputs and custom components
• Named and scoped slots for flexible component composition

Best Practices

• Use <script setup> over Options API for new code
• Keep components small, one concern per component
• Use computed instead of method calls in template for caching

Common Code Patterns

• watchEffect for running side effects that auto-track dependencies
• defineProps/defineEmits macro for typed component interfaces
• Scoped slots: pass data up via slot props for render flexibility