> Markdown version of [/videos/539-under-the-hood-of-vue-3-reactivity](https://www.wearedevelopers.com/videos/539-under-the-hood-of-vue-3-reactivity). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Under The Hood Of Vue 3 Reactivity

Vue 3's reactivity isn't hidden magic. Watch us live-code a custom ES6 Proxy engine from scratch to deeply understand modern state management and automated dependency tracking.

- **Speakers:** Marc Backes
- **Event:** WeAreDevelopers LIVE
- **Published:** April 18, 2023
- **Duration:** 54:44
- **URL:** https://www.wearedevelopers.com/videos/539-under-the-hood-of-vue-3-reactivity

## Summary

Vue 3's reactivity system might feel like hidden magic, but at its core, it relies on a straightforward implementation of the Observer pattern and the power of ES6 Proxies. This deep dive explores the inner workings of Vue 3's engine by live-coding a custom reactivity system from scratch. Instead of relying on manual DOM updates—where changing a product's price requires explicitly triggering a calculation function—modern reactive frameworks automate these state transitions using automated dependency tracking.

Transitioning from Vue 2's `Object.defineProperty`, Vue 3 leverages ES6 Proxies to smoothly intercept getters and setters without structurally mutating the original object. The underlying architecture operates on a hierarchy of native JavaScript data structures: a `Set` holds unique functions (side effects) that need triggering, a `Map` associates these effect sets with specific object properties, and a `WeakMap` links original target objects to their matching property maps. Wrapping a target object in a proxy allows the system to seamlessly log dependencies within a `get` trap while firing corresponding functional updates via the `set` trap.

By managing a global `activeEffect`, the engine intelligently infers the relationship between dynamic side effects and reactive state variables without manual registration. While the introductory 30-line implementation triggers all tracked effects on a basic state mutation, the production-grade Vue architecture strictly correlates updates against the specific properties that actually changed to ensure UI performance. Ultimately, migrating to ES6 Proxies creates an exceptionally performant and scalable reactivity layer that avoids memory bottlenecks, equipping modern web apps to manage highly complex state trees and deeply nested objects effortlessly.

**Keywords:** vue 3 reactivity, es6 proxies, observer pattern, proxy trap interception, javascript dependency tracking, weakmap target mapping, object.defineproperty alternative, frontend framework architecture, track and trigger mechanics, reactive state management, active effect execution, deep watchers for nested objects, custom reactivity engine, javascript set and map

## Chapters

1. **Fundamental concepts of Vue 3 reactivity and Observer pattern** (02:57) — The basic mechanisms of tracking changes and notifying subscribers using the Observer pattern.
1. **Intercepting object properties with ES6 proxies** (05:54) — Why ES6 proxies replace object define property to effectively override getters and setters.
1. **Mapping dependencies with targets properties and effects** (09:52) — The internal data structures including WeakMap, Map, and Set used to link object properties to their reactive side effects.
1. **Identifying the need for automated state updates** (13:42) — A live coding example revealing how vanilla JavaScript fails to recalculate variables automatically upon state changes.
1. **Implementing manual track and trigger functions** (18:33) — Constructing rudimentary tracking to store associated functions in a Javascript Set and executing them synchronously.
1. **Building a manual proxy handler for target objects** (22:00) — Writing a proxy handler from scratch to view and intercept target keys during read and write operations.
1. **Constructing the reactive wrapper to automate tracking operations** (28:26) — Combining custom track and trigger logic into a dynamic proxy interface to create the core reactive function.
1. **Wiring dynamic dependencies using an active effect variable** (33:17) — Connecting functions explicitly via a temporary global variable to inherently register dependencies without hardcoding object paths.
1. **Simulating DOM updates using the constructed reactivity engine** (38:51) — Applying the constructed reactivity logic to trigger HTML text recalculations and CSS changes interactively.
1. **Discussion on proxy performance and nested component reactivity** (42:29) — Addressing backend footprint concerns with proxies, handling deep state paths, and filtering computational bounds dynamically.

## Related Moments

- [Core JavaScript structures powering Vue reactivity](https://www.wearedevelopers.com/videos/228-under-the-hood-of-vue-3-reactivity) (from "Under The Hood of Vue 3 Reactivity")
- [Comparing Vue to React and Angular](https://www.wearedevelopers.com/videos/127-vuejs-and-typescript-working-together-like-peanut-butter-and-jelly) (from "Vuejs and TypeScript- Working Together like Peanut Butter and Jelly")
- [Introduction to the speaker and frontend projects](https://www.wearedevelopers.com/videos/1666-lessons-learned-from-building-a-thriving-vue-js-saas-application) (from "Lessons learned from building a thriving Vue.js SaaS application")
- [Automating dependency tracking with native ES6 proxies](https://www.wearedevelopers.com/videos/228-under-the-hood-of-vue-3-reactivity) (from "Under The Hood of Vue 3 Reactivity")
- [Tracking open source community trends in JavaScript native frameworks](https://www.wearedevelopers.com/videos/1288-wearedevelopers-live-scammer-payback-with-python-grok-goes-unhinged-the-future-of-chromium-and-mo) (from "WeAreDevelopers LIVE: Scammer Payback with Python, Grok Goes Unhinged, The Future of Chromium and mo")
- [Navigating the learning curve of reactive programming](https://www.wearedevelopers.com/videos/1-practice-makes-perfect-when-it-comes-to-rxjs) (from "Practice makes perfect - when it comes to RxJS")

## Related Articles

- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [View Transition API: Adding Single-Page Transitions With Just HTML, CSS and JS](https://www.wearedevelopers.com/magazine/632-view-transition-api-adding-single-page-transitions-with-just-html-css-and-js)
- [Create Videos Programmatically with React and Remotion](https://www.wearedevelopers.com/magazine/742-create-videos-programmatically-with-react-and-remotion)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Software Engineer, React (Bitpanda Broker)](https://www.wearedevelopers.com/jobs/ext/1444421-software-engineer-react-bitpanda-broker) at **Bitpanda**