Vue Composition API Cheat Sheet

Core syntax for Vue 3's Composition API including reactive refs, computed values, watchers, lifecycle hooks, and composables.

2 PagesIntermediateJan 22, 2026

Reactive State with ref/reactive

Declare reactive primitives and objects inside <script setup>.

javascript

<script setup>import { ref, reactive, computed } from 'vue'const count = ref(0)              // primitive -> access via count.valueconst user = reactive({ name: 'Ana', age: 30 }) // object -> no .valueconst doubled = computed(() => count.value * 2)function increment() {  count.value++  user.age++}</script><template>  <button @click="increment">{{ count }} / {{ doubled }}</button></template>

watch and watchEffect

React to reactive changes with fine-grained or automatic dependency tracking.

javascript

import { ref, watch, watchEffect } from 'vue'const search = ref('')const results = ref([])// watch: explicit source, gives old/new valueswatch(search, async (newVal, oldVal) => {  results.value = await fetchResults(newVal)}, { immediate: true })// watchEffect: auto-tracks any reactive deps used insidewatchEffect(() => {  console.log(`Searching for: ${search.value}`)})// stop a watcher manuallyconst stop = watch(search, () => {})stop()

Custom Composable

Extract stateful logic into a reusable function following the useX naming convention.

javascript

// useMouse.jsimport { ref, onMounted, onUnmounted } from 'vue'export function useMouse() {  const x = ref(0)  const y = ref(0)  function update(e) {    x.value = e.pageX    y.value = e.pageY  }  onMounted(() => window.addEventListener('mousemove', update))  onUnmounted(() => window.removeEventListener('mousemove', update))  return { x, y }}// component.vue// import { useMouse } from './useMouse'// const { x, y } = useMouse()

defineProps / defineEmits

Type-safe props and events in <script setup> without imports.

typescript

<script setup lang="ts">interface Props {  title: string  count?: number}const props = withDefaults(defineProps<Props>(), { count: 0 })const emit = defineEmits<{  (e: 'update', value: number): void  (e: 'close'): void}>()function bump() {  emit('update', props.count + 1)}</script>

Composition API Lifecycle Hooks

Options API equivalents mapped to composition hooks.

onMounted- runs after the component is mounted to the DOM (replaces mounted)
onUpdated- runs after a reactive dependency triggers a re-render (replaces updated)
onUnmounted- cleanup timers/listeners before the component is destroyed (replaces destroyed)
onBeforeMount / onBeforeUpdate / onBeforeUnmount- pre-phase hooks for each lifecycle stage
onErrorCaptured- catches errors from descendant components, return false to stop propagation
onActivated / onDeactivated- fire when a component inside <KeepAlive> is toggled

Pro Tip

Prefer `reactive()` for grouped domain state and `ref()` for anything you'll destructure or pass across composable boundaries — destructuring a reactive object loses reactivity, but `toRefs()` fixes that when you must.

Was this cheat sheet helpful?

Synthetic Data Generation Cheat Sheet

Qwik Cheat Sheet