WeAreDevelopers LIVE • Apr 18, 2023

Under The Hood Of Vue 3 Reactivity

Marc Backes

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.

Pause

Mute

Enter Fullscreen

#1 about 3 min

Fundamental concepts of Vue 3 reactivity and Observer pattern

The basic mechanisms of tracking changes and notifying subscribers using the Observer pattern.

#2 about 4 min

Intercepting object properties with ES6 proxies

Why ES6 proxies replace object define property to effectively override getters and setters.

#3 about 4 min

Mapping dependencies with targets properties and effects

The internal data structures including WeakMap, Map, and Set used to link object properties to their reactive side effects.

#4 about 5 min

Identifying the need for automated state updates

A live coding example revealing how vanilla JavaScript fails to recalculate variables automatically upon state changes.

#5 about 4 min

Implementing manual track and trigger functions

Constructing rudimentary tracking to store associated functions in a Javascript Set and executing them synchronously.

#6 about 7 min

Building a manual proxy handler for target objects

Writing a proxy handler from scratch to view and intercept target keys during read and write operations.

#7 about 5 min

Constructing the reactive wrapper to automate tracking operations

Combining custom track and trigger logic into a dynamic proxy interface to create the core reactive function.

#8 about 6 min

Wiring dynamic dependencies using an active effect variable

Connecting functions explicitly via a temporary global variable to inherently register dependencies without hardcoding object paths.

#9 about 4 min

Simulating DOM updates using the constructed reactivity engine

Applying the constructed reactivity logic to trigger HTML text recalculations and CSS changes interactively.

#10 about 13 min

Discussion on proxy performance and nested component reactivity

Addressing backend footprint concerns with proxies, handling deep state paths, and filtering computational bounds dynamically.

Matching moments

5:27 min

Core JavaScript structures powering Vue reactivity

Marc Backes · World Congress 2021

2:59 min

Comparing Vue to React and Angular

Rob Richardson · LIVE

1:28 min

Introduction to the speaker and frontend projects

Abdelrahman Awad

Abdelrahman Awad · World Congress 2025

3:30 min

Automating dependency tracking with native ES6 proxies

Marc Backes · World Congress 2021

4:30 min

Tracking open source community trends in JavaScript native frameworks

Dan Cranney +2 · LIVE

1:58 min

Navigating the learning curve of reactive programming

Jan-Niklas Wortmann · LIVE

More from WeAreDevelopers LIVE

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Fake or News: Smart Glasses in Court, Medical Advice Watches & Mushroom Electonics - Jason Torres thumbnail

Fake or News: Smart Glasses in Court, Medical Advice Watches & Mushroom Electonics - Jason Torres

Chris Heilmann, Daniel Cranney

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail

about 1 month ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Stage 9

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood

World Congress 2026 North America

September 24, 2026 · 11:40–12:10

Stage 4

Taming Rogue Agents: Observability-Driven Evaluation for Production Reliability

Anagha Rumade, Anjana Umapathy, Apoorva Jaiswal

Anagha Rumade

Anjana Umapathy

Apoorva Jaiswal

World Congress 2026 North America

September 24, 2026 · 14:10–14:40

Stage 9

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki

Paweł Matynia

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 1

The Agentic Engineering Loop

Kevin Lin

Member of Technical Staff at OpenAI

Kevin Lin

Related videos

Under The Hood of Vue 3 Reactivity thumbnail

World Congress 2021 • about 5 years ago

Under The Hood of Vue 3 Reactivity

Marc Backes

Common Mistakes in Vue.js and How to Avoid Them thumbnail

World Congress 2024 • about 2 years ago

Common Mistakes in Vue.js and How to Avoid Them

danielkellyio

Bringing back reactivity in "reactive" frontend thumbnail

World Congress 2024 • about 2 years ago

Bringing back reactivity in "reactive" frontend

Michał Moroz

petite-vue - Progressively enhancing every application? thumbnail

LIVE • over 3 years ago

petite-vue - Progressively enhancing every application?

Alexander Lichter

TresJS a new declarative ThreeJS as Vue components thumbnail

LIVE • over 3 years ago

TresJS a new declarative ThreeJS as Vue components

Alvaro Saburido

Lessons learned from building a thriving Vue.js SaaS application thumbnail

World Congress 2025 • about 1 year ago

Lessons learned from building a thriving Vue.js SaaS application

Abdelrahman Awad

Related articles

LM

Luis Minvielle

The Best JavaScript Framework to Learn

When the Greek mastermind Heraclitus, millennia ago, claimed that “the only constant is change,” he certainly pepped up Star Wars creator George Lucas to perpetually re-do shots crucial to the cano...

over 3 years ago

The Best JavaScript Framework to Learn

DC

Daniel Cranney

3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents

If you’ve ever read the WeAreDevelopers Magazine before, you’ll know we love showing developers how to take advantage of native platform features and avoid over-engineering UI’s with frameworks or ...

8 months ago

A woman on a laptop with a table of contents showing on the screen

DC

Daniel Cranney

View Transition API: Adding Single-Page Transitions With Just HTML, CSS and JS

Over the past few years, you’ve likely noticed an increase in websites and applications featuring transitions that take place as you change page. Perhaps it’s a simple crossfade between the current...

11 months ago

An image transitioning in size

DC

Daniel Cranney

Create Videos Programmatically with React and Remotion

In a recent article, we looked at how easy it is to clone your voice using Elevenlabs and Node.js , so this time we thought we’d take a look at how to create videos programmatically, too. In a futu...

2 months ago

A video on a screen, being ceated programatically

From learning to earning

Jobs that call for the skills explored in this talk.

12 days ago • Verified

Sr Product Experience Designer

Detroit, United States

Expert Remote CSS HTML React

about 1 month ago

Senior Software Engineer, React (Investing & Trading)

Remote Next.js ReactJS Caching

about 1 month ago

Senior Software Engineer, React (Websites & Martech)

Remote Next.js ReactJS Backend

about 1 month ago

React Engineer For Next.Js Ui - Hybrid, Impactful Fintech

Next.js ReactJS Backend

16 days ago • Verified

Founding Engineer (Front End)

San Francisco, United States

Expert €180k–220k React Next.js JavaScript

Junior Frontend Engineer

Berlin, Germany

Starter €60k–75k NestJS ReactJS Backend