Marc Backes

Under The Hood Of Vue 3 Reactivity

What if you could build Vue 3's reactivity from scratch? See how ES6 Proxies make it possible in under 30 lines of code.

Under The Hood Of Vue 3 Reactivity
#1about 3 minutes

Understanding the core principles of reactivity

Reactivity is explained as an automated observer pattern where changes to data trigger updates wherever that data is used.

#2about 2 minutes

Using ES6 Proxies to intercept data access

ES6 Proxies wrap objects and allow interception of operations like getting or setting properties, which is the foundation for Vue 3's reactivity.

#3about 4 minutes

Architecting the reactivity system with maps and sets

The system uses a WeakMap to store a Map for each object, which in turn stores a Set of effects for each property.

#4about 5 minutes

Demonstrating the problem with manual state updates

The initial code shows how changing a product's price or quantity requires manually recalculating the total each time.

#5about 3 minutes

Building manual track and trigger functions

The `track` function adds an effect to a Set, and the `trigger` function iterates over the Set to execute all tracked effects.

#6about 11 minutes

Building a reactive function with ES6 Proxies

A `reactive` function is created using an ES6 Proxy to intercept property access, with `get` handlers calling `track` and `set` handlers calling `trigger`.

#7about 4 minutes

Automating dependency tracking with an effect function

The `effect` function wraps a piece of code, sets it as the `activeEffect`, and runs it once to automatically track all accessed reactive properties.

#8about 6 minutes

Connecting the reactive system to the DOM

The final step demonstrates the complete system by linking the reactive state to DOM elements, which update automatically when the state changes.

#9about 12 minutes

Answering audience questions about reactivity and career

The speaker answers questions about proxy performance, nested objects, career journey, and identifying reactive objects in a large codebase.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Exploring the core technologies behind Vue 3 reactivity
03:41 MIN

Exploring the core technologies behind Vue 3 reactivity

Under The Hood of Vue 3 Reactivity

Answering questions on reactivity and browser support
44:41 MIN

Answering questions on reactivity and browser support

Under The Hood of Vue 3 Reactivity

Understanding the core concept of reactivity
02:14 MIN

Understanding the core concept of reactivity

Under The Hood of Vue 3 Reactivity

Creating observable state with JavaScript proxies
08:57 MIN

Creating observable state with JavaScript proxies

The Naked Web Developer: Your Browser Is Your Framework

Defining true reactivity in modern frameworks
09:14 MIN

Defining true reactivity in modern frameworks

Angular Signals: what's all the fuss about?

Connecting the custom reactivity engine to the DOM
40:16 MIN

Connecting the custom reactivity engine to the DOM

Under The Hood of Vue 3 Reactivity

How popular JavaScript libraries implement reactivity
06:51 MIN

How popular JavaScript libraries implement reactivity

Bringing back reactivity in "reactive" frontend

Introducing petite-vue for lightweight reactivity
09:35 MIN

Introducing petite-vue for lightweight reactivity

petite-vue - Progressively enhancing every application?

Featured Partners

Related Videos

See all videos
Under The Hood of Vue 3 Reactivity49:00

Under The Hood of Vue 3 Reactivity

Marc Backes

petite-vue - Progressively enhancing every application?44:40

petite-vue - Progressively enhancing every application?

Alexander Lichter

Common Mistakes in Vue.js and How to Avoid Them28:36

Common Mistakes in Vue.js and How to Avoid Them

Daniel Kelly

Bringing back reactivity in "reactive" frontend28:43

Bringing back reactivity in "reactive" frontend

Michał Moroz

What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

Vue3 practical development44:11

Vue3 practical development

Mikhail Kuznetcov

React and the power of visualisation40:19

React and the power of visualisation

Daisy Muyldermans

Modern Web Development with Nuxt341:43

Modern Web Development with Nuxt3

Alexander Lichter

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
BR
Benjamin Ruschin
What Developers Really Need to Create Great Code Demos
Every developer on earth has, at some point, had another developer to thank for a breakthrough, a success, an aha moment they wouldn’t have had without coming across that blog post, that open-source contribution, that reply on socials or that humble ...
What Developers Really Need to Create Great Code Demos
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript

From learning to earning

Jobs that call for the skills explored in this talk.