Vue.js Cheatsheet - API Reference

This reference targets Vue 3 developers working with the Composition API and <script setup>. It walks from reactivity basics (ref vs reactive) to computed and watchers, then props/emits/provide-inject for component communication, before covering routing, Pinia, templates, and performance tweaks like shallowRef and defineAsyncComponent. Each entry is a snippet you can drop into an existing SFC and observe the reactive update. After reading you should be able to manage local state with ref/reactive, react to changes with watch, wire up a child parent call, and lazy-load heavy components.

Languages·46 commands·Last updated 2026-07-21

Reactivity Basics 8

const count = ref(0)

Reactive primitive

count.value++

Update a ref (.value in script)

const state = reactive({ name: "Vue" })

Reactive object

const doubled = computed(() => count.value * 2)

Read-only computed

const w = computed({ get: () => v.value, set: (x) => (v.value = x) })

Writable computed

watch(count, (n, o) => {}, { immediate: true })

Watch with immediate run

watchEffect(() => console.log(count.value))

Auto-tracked watch effect

const { name } = toRefs(state)

Destructure while staying reactive

Lifecycle Hooks 6

onBeforeMount(() => {})

Before mount

onMounted(() => {})

After mount (good for fetch)

onBeforeUpdate(() => {})

Before update

onUpdated(() => {})

After update

onBeforeUnmount(() => {})

Before unmount (cleanup)

onUnmounted(() => {})

After unmount

Component Communication 6

defineProps<{ msg: string }>()

Declare props (type form)

const emit = defineEmits(["change"])

Declare emitted events

defineExpose({ method() {} })

Expose methods to parent ref

provide("theme", "dark")

Provide data to descendants

const theme = inject("theme", "light")

Inject with a default

const model = defineModel<string>()

Two-way binding (Vue 3.4+)

Composables 5

function useCounter(n = 0) { const c = ref(n); return { c, inc: () => c.value++ } }

Custom counter composable

const { c, inc } = useCounter(10)

Use a custom composable

function useMouse() { const x = ref(0); const y = ref(0); return { x, y } }

Encapsulate mouse position

function useEventListener(el, ev, cb) { onUnmounted(() => el.removeEventListener(ev, cb)) }

Encapsulate listener with auto-cleanup

function useFetch(url) { /* return { data, error, loading } */ }

Encapsulate an async request

Router & State 7

const route = useRoute()

Get current route

const router = useRouter()

Get router instance

router.push("/users")

Programmatic navigation

router.replace("/login")

Replace route (no history)

const store = useCounterStore()

Get a Pinia store

const { count } = storeToRefs(store)

Destructure store (reactive)

store.$patch({ count: 1 })

Patch store state

Template Syntax 8

{{ message }}

Text interpolation

:href="url"

Attribute binding (v-bind shorthand)

@click="handler"

Event binding (v-on shorthand)

v-model="form.name"

Two-way binding

v-if / v-else-if / v-else

Conditional rendering

v-for="item in list" :key="item.id"

List rendering (key required)

<Teleport to="body">

Teleport to a DOM node

<slot name="header" />

Named slot

Performance 6

const list = shallowRef([])

Shallow ref (large objects/lists)

markRaw(obj)

Mark raw (never reactive)

v-memo="[a, b]"

Template memo (Vue 3.2+)

defineAsyncComponent(() => import("./Comp.vue"))

Lazy async component

<KeepAlive include="UserList">

Cache component instance (KeepAlive)

<Suspense>

Coordinate async loading (Suspense)

Tips

ref is for primitives, reactive for objects; ref needs .value in script but auto-unwraps in templates.
computed caches and recomputes only on dependency change; watch is lazy unless immediate: true.
defineProps/Emits/Expose/Model are compiler macros - no import needed.
Destructuring a reactive object loses reactivity; wrap with toRefs first.
Use shallowRef + v-memo for big lists, defineAsyncComponent for route components.

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

Node.js Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.