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. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
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. |