The Magic (and Gotchas) of Vue.js Reactivity: How It Knows Exactly What to Update

The Magic (and Gotchas) of Vue.js Reactivity: How It Knows Exactly What to Update If you've used Vue.js, you've probably experienced that "wow" moment: you change a variable and the UI updates automatically. No setState, no massive useEffect chains, no manual subscriptions. It feels like magic. But it's not magic — it's a beautifully engineered reactivity system. And behind that simplicity lies one of the most interesting technical implementations in modern frontend frameworks. What Makes Vue's Reactivity So Special? Unlike React, which relies on Virtual DOM diffing and explicit hooks, Vue 3 uses native JavaScript Proxies (ES6) to create automatic dependency tracking. Here's the trick in simple terms: When you read a reactive property (e.g. count.value), Vue secretly registers that the current effect (component render, watcher, or computed) depends on it. When you change that property, Vue only notifies the effects that actually depend on it. This is called fine-grained reactivity — su