Vue Reactivity (Part 1): How ref, reactive, and Proxy Work

Vue 3's reactivity is built on Proxy: reading a property tracks the consumer, setting a property triggers updates. Understanding how that works helps you avoid edge cases, debug reactive code, and choose the right primitive (ref, reactive, shallowRef, markRaw). This post goes under the hood for senior Vue developers.

Proxy-based reactivity

In Vue 3, reactive(obj) wraps obj in a JavaScript Proxy. When you read a property (e.g. state.count), the Proxy's get trap runs: Vue records the current effect (e.g. a computed or a render) as a dependency of that property. When you write to a property (e.g. state.count = 2), the set trap runs: Vue notifies all effects that depend on that property, and they re-run. So "reactive" means: track reads, trigger on writes.