Vue is a progressive JavaScript framework for building user interfaces and single-page applications, distinguished by its approachable learning curve, reactive data system, and component-based architecture. Unlike monolithic frameworks, Vue is incrementally adoptable — you can use it as a simple library for enhancing static HTML or scale to a full-featured SPA framework with routing, state management, and build tooling. The framework's reactivity system automatically tracks dependencies and updates the DOM efficiently when data changes, eliminating manual DOM manipulation. Vue 3.5 brought significant improvements including reactive props destructuring, useTemplateRef(), useId(), onWatcherCleanup(), deferred Teleport, and 56% memory reduction in the reactivity system.
What This Cheat Sheet Covers
This topic spans 23 focused tables and 197 indexed concepts, 169 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
Table 1: Core Reactivity Primitives
These are the building blocks of Vue's reactivity — the functions that make plain values and objects "watchable" so the view updates itself when data changes. ref and reactive are the two you reach for constantly; the rest (computed, toRefs, shallowRef, and friends) handle derived values, safe destructuring, and the performance trade-offs that come with large or externally-managed state.
| Function | Example | Description | |
|---|---|---|---|
const count = ref(0)count.value++ | • Creates a reactive reference for primitive values or objects • accessed via .value in scripts, auto-unwrapped in templates. | ||
const state = reactive({ count: 0 })state.count++ | • Converts objects into deeply reactive proxies • changes to nested properties trigger updates • does not work on primitives. | ||
const doubled = computed(() => count.value * 2) | • Creates a cached reactive value that only re-computes when its dependencies change • read-only by default; use getter/setter object for writable computed. | ||
const count = toRef(props, 'count') | Creates a reactive ref for a single property of a reactive object, maintaining the reactivity connection to source. | ||
const { x, y } = toRefs(state) | Converts all properties of a reactive object into refs, enabling destructuring while preserving reactivity. | ||
const copy = readonly(original) | Creates a read-only proxy of a reactive object — mutations to copy are blocked, but original remains mutable. | ||
const state = shallowRef({ count: 0 })state.value = { count: 1 } | • Tracks reactivity only for .value reassignment, not nested properties• ideal for large data structures or external state. | ||
const state = shallowReactive({ nested: { count: 0 } }) | • Tracks reactivity only for root-level properties — nested objects remain non-reactive • useful for performance optimization. | ||
const val = toValue(maybeRefOrGetter) | • (Vue 3.3+) Normalizes a ref, getter function, or plain value to its underlying value • essential for composables that accept flexible inputs. | ||
const scope = effectScope()scope.run(() => { watch(/*...*/) })scope.stop() | Creates a scope that collects all reactive effects (computed, watchers) so they can be stopped together — primarily for library authors. |