How Vue 3 reactivity works — Vue.js 3 (with Pinia, Vue Router & Nuxt basics)

6. How Vue 3 reactivity works

Intermediate★ Must knowLesson 6 of 17

reactive() wraps an object in a Proxy: the get trap tracks which running effect (component render, computed, watcher) read the property; the set trap triggers those effects.
ref() is an object with a getter/setter on .value doing the same tracking.
Effects re-run → component re-render is scheduled → batched → DOM patched in the next tick (await nextTick() to read updated DOM).
Vue 2 used Object.defineProperty, so it couldn't detect added/deleted properties or array index assignment — you needed Vue.set/this.$set. Vue 3's Proxies detect all of these.

const state = reactive({ user: { name: "Asha" } });
state.user.email = "a@x.com";        // reactive in Vue 3 (needed Vue.set in Vue 2)
const arr = reactive([1, 2, 3]);
arr[0] = 99;                          // reactive in Vue 3