WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2021 • Jun 28, 2021

Under The Hood of Vue 3 Reactivity

Marc Backes

Vue 3’s reactivity isn't magic. It's a sophisticated engine built on pure ES6 Proxies. Reconstruct it from scratch and unlock its standalone power for any JavaScript application.

Pause
Mute Enter Fullscreen
#1 about 3 min

Core concepts of reactivity and the observer pattern

Automating UI updates requires an observer pattern to passively listen and notify dependent logic properties when arbitrary values shift.

#2 about 6 min

Core JavaScript structures powering Vue reactivity

Addressing previous property interception limitations, newer framework structures leverage ES6 proxies over static object definitions to intercept data mutations dynamically.

#3 about 4 min

Mapping dependencies with weak maps and sets

Structuring deep application models requires pairing weak maps with individual target keys to guarantee that active effects execute only against precise mutational flows.

#4 about 11 min

Building an effect tracking system from scratch

Avoiding repetitive manual updates demands placing strict hardcoded variable functions inside dedicated array sets meant exclusively to trigger continuous side execution.

#5 about 4 min

Automating dependency tracking with native ES6 proxies

Overwriting native proxy getters and setter handler variables constructs entirely autonomous environments capable of seamlessly managing all state mutations globally.

#6 about 5 min

Binding correct contexts using Reflect and receiver argument

Safely referencing contextual pointer depths internally utilizes the Reflect API matching specialized receiver boundaries directly within complex setter invocations.

#7 about 6 min

Abstracting proxy logic into a reusable wrapper

Consolidating detailed proxy parameters inside an overarching closure module returns cleanly instantiated stores prepared natively for flexible frontend architectures.

#8 about 4 min

Isolating property tracking through active effect watcher functions

Registering specific active effect states universally ensures identical handler actions occur explicitly following tightly controlled value manipulation windows continuously.

#9 about 5 min

Binding reactive object state to dynamic DOM nodes

Exposing modified proxy targets inside immediate element callbacks pushes visual node recalibration seamlessly without complex template compilation scaffolding.

#10 about 5 min

Addressing framework browser support and practical adoption

Decoupling responsive engine fundamentals directly allows developers to push reactivity implementations successfully beyond web interfaces and into distinct server layers universally.

Matching moments

2:57 min

Fundamental concepts of Vue 3 reactivity and Observer pattern

Marc Backes · LIVE

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

4:30 min

Tracking open source community trends in JavaScript native frameworks

Dan Cranney +2 · LIVE

3:46 min

The rise of modern component-based frameworks and modular architecture

Sasha Shynkevich · LIVE

2:50 min

Defining true reactivity in web frameworks

Daniela Bonvini · LIVE

More from World Congress 2021

Micro Frontends with Module Federation: Why and How? thumbnail
45:40
almost 5 years ago

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Data Science on Software Data thumbnail
48:10
about 5 years ago

Data Science on Software Data

Markus Harrer

The journey from developer to devops - what i've learnt along the way thumbnail
42:44
about 5 years ago

The journey from developer to devops - what i've learnt along the way

Liam Hurrel, Alireza Chegini

How Data is Shaping our Games thumbnail
43:30
about 5 years ago

How Data is Shaping our Games

Johanna Pirker

Cross platform Augmented Reality development with React Native thumbnail
40:50
about 5 years ago

Cross platform Augmented Reality development with React Native

Vladimir Novick

How to Build a Monetization Strategy Based on User's in-app Behavior thumbnail
38:59
about 5 years ago

How to Build a Monetization Strategy Based on User's in-app Behavior

Natalie Sieradzki

Upcoming sessions on this topic

Open session

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
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

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
Open session

World Congress 2026 North America

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

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

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
54:44
LIVE • over 3 years ago

Under The Hood Of Vue 3 Reactivity

Marc Backes

Common Mistakes in Vue.js and How to Avoid Them thumbnail
28:36
WWC 2024 • almost 2 years ago

Common Mistakes in Vue.js and How to Avoid Them

danielkellyio

Bringing back reactivity in "reactive" frontend thumbnail
28:43
WWC 2024 • almost 2 years ago

Bringing back reactivity in "reactive" frontend

Michał Moroz

TresJS a new declarative ThreeJS as Vue components thumbnail
59:15
LIVE • over 3 years ago

TresJS a new declarative ThreeJS as Vue components

Alvaro Saburido

petite-vue - Progressively enhancing every application? thumbnail
44:40
LIVE • over 3 years ago

petite-vue - Progressively enhancing every application?

Alexander Lichter

Building Better with Nuxt 3 thumbnail
41:22
JS Congress • over 4 years ago

Building Better with Nuxt 3

Daniel Roe

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.