What is Vue's reactivity system?

Vue's reactivity system automatically tracks which data is used by the view and updates the DOM when that data changes — without manually manipulating the DOM. Vue 3 reactivity (Proxy-based): when you declare reactive state, Vue wraps the object in an ES Proxy. When the proxy's get trap is triggered (reading a property), Vue records that this effect/component depends on this data. When the proxy's set trap is triggered (writing a property), Vue notifies all dependents to re-run. ref(): makes a single value reactive. Returns an object with a .value property: const count = ref(0); count.value++; // triggers update. In templates, .value is unwrapped automatically: {{ count }}. reactive(): makes an entire object reactive using Proxy: const state = reactive({ count: 0, name: "Alice" }); state.count++;. No .value needed. Limitation: loses reactivity if destructured (const { count } = state breaks reactivity — use toRefs()). Vue 2 reactivity: used Object.defineProperty with explicit get/set interceptors. Couldn't detect property addition (this.newProp = value — not reactive), needed Vue.set(). Array mutation methods were patched. Vue 3's Proxy solves all these limitations — any property access/mutation is intercepted, including new properties and array index assignments.