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 · WWC 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 · WWC 2025

3:30 min

Automating dependency tracking with native ES6 proxies

Marc Backes · WWC 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

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

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

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail

about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

World Congress 2026 North America

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

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris

World Congress 2026 North America

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

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

Paweł Matynia, Bartosz Leczycki

Paweł Matynia

Bartosz Leczycki

World Congress 2026 North America

The Agentic Engineering Loop

Kevin Lin

Member of Technical Staff at OpenAI

Kevin Lin

World Congress 2026 North America

GitHub’s Team X-Ray: Your Repository Knows More About Your Team Than Your Team Does

Andrea Griffiths

Senior Developer Advocate

Andrea Griffiths

Related videos

Under The Hood of Vue 3 Reactivity thumbnail

WWC 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

WWC 2024 • almost 2 years ago

Common Mistakes in Vue.js and How to Avoid Them

danielkellyio

Bringing back reactivity in "reactive" frontend thumbnail

WWC 2024 • almost 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

WWC 2025 • 12 months 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 ...

7 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...

about 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.

20 days ago • Verified

Staff Frontend Engineer

SMG Swiss Marketplace Group

Belgrade, Serbia

20 days ago • Verified

Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City

SMG Swiss Marketplace Group

Ho Chi Minh City, Vietnam

Software Engineer, React & Angular (Broker Web Platform

Barcelona, Spain

Remote Next.js ReactJS Backend

Senior Software Engineer, React (Investing & Trading)

Remote Next.js ReactJS Caching

React Engineer for Next.js UI - Hybrid, Impactful FinTech

Barcelona, Spain

€55k–85k Next.js ReactJS TypeScript

Software Engineer, React (Bitpanda Broker)

Barcelona, Spain

Remote Backend TypeScript Code Review