Vue.js Cheatsheet - API Reference

All essential Vue.js commands organized by use case, with 46+ entries you can copy and run directly. Find the right command fast when you need it.

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

Back to Languages

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

Commands are compiled from the official docs below. Click to verify the latest usage.

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.