Marc Backes

Apr 18, 2023 • WeAreDevelopers LIVE

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.

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

Andrew Comp
Berlin, Germany

Intermediate

Java

JavaScript

Understanding the core principles of reactivity

Using ES6 Proxies to intercept data access

Architecting the reactivity system with maps and sets

Demonstrating the problem with manual state updates

Building manual track and trigger functions

Building a reactive function with ES6 Proxies

Automating dependency tracking with an effect function

Connecting the reactive system to the DOM

Answering audience questions about reactivity and career

Designer

Matching moments

Exploring the core technologies behind Vue 3 reactivity

Under The Hood of Vue 3 Reactivity

Introducing petite-vue for lightweight reactivity

petite-vue - Progressively enhancing every application?

Answering questions on reactivity and browser support

Under The Hood of Vue 3 Reactivity

Navigating state management patterns and their trade-offs

Lessons learned from building a thriving Vue.js SaaS application

Understanding the core concept of reactivity

Under The Hood of Vue 3 Reactivity

Creating observable state with JavaScript proxies

The Naked Web Developer: Your Browser Is Your Framework

Connecting the custom reactivity engine to the DOM

Under The Hood of Vue 3 Reactivity

Defining true reactivity in modern frameworks

Angular Signals: what's all the fuss about?

Featured Partners

Related Videos

Under The Hood of Vue 3 Reactivity

petite-vue - Progressively enhancing every application?

Vue3 practical development

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

TDD for Vue.js Developers

Why I Recommend Svelte to Every New Web Developer

Building Better with Nuxt 3

TresJS a new declarative ThreeJS as Vue components

Related Articles

From learning to earning

Lead Frontend Engineer | Vue.js 3

Web Developer \u2013 Vue.js & Modern JS

Vue.js Lead Developer

Vue.js Developer im Frontend

Frontend Developer Vue.js / React / JavaScript

Frontend Developer - Vue.js (m\/w\/d)

Frontend Developer (/ - Vue.js / React (Berlin-Mitte)

Full-Stack Entwickler C# / .NET - Vue.js / Nuxt

Frontend-Softwareentwicklung im Web mit Vue, HTML, CSS, JavaScript mit Wohnsitz in Berlin