Vue 3 Composition API Cheatsheet
Complete Vue 3 Composition API reference: reactivity, computed, watchers, lifecycle hooks.
| API | Description | Syntax | Example | Category |
|---|---|---|---|---|
| ref() | Create reactive reference | const count = ref(0) | const count = ref(0); count.value++ | Reactivity |
| reactive() | Create reactive object | const state = reactive({ count: 0 }) | const state = reactive({ count: 0, name: "Vue" }) | Reactivity |
| computed() | Create computed property | const double = computed(() => count.value * 2) | const fullName = computed(() => first + " " + last) | Computed |
| watch() | Watch for reactive changes | watch(source, (newVal, oldVal) => {}) | watch(count, (newVal) => console.log(newVal)) | Watchers |
| watchEffect() | Auto-track dependencies | watchEffect(() => { ... }) | watchEffect(() => console.log(count.value)) | Watchers |
| onMounted() | Run on component mount | onMounted(() => { ... }) | onMounted(() => { fetchData() }) | Lifecycle |
| onUpdated() | Run after update | onUpdated(() => { ... }) | onUpdated(() => { console.log("Updated") }) | Lifecycle |
| onUnmounted() | Run before unmount | onUnmounted(() => { ... }) | onUnmounted(() => { cleanup() }) | Lifecycle |
| provide() | Provide value to children | provide(key, value) | provide("theme", "dark") | Templates |
| inject() | Inject provided value | const value = inject(key, defaultValue) | const theme = inject("theme", "light") | Templates |