Under The Hood of Vue 3 Reactivity

Vue 3's reactivity isn't magic. It's an automated observer pattern you can build from scratch using native JavaScript Proxies and Reflect.

#1about 1 minute

Understanding the core concept of reactivity

Reactivity is explained as an automated observer pattern that listens for changes and notifies the system to update where needed.

#2about 2 minutes

Exploring the core technologies behind Vue 3 reactivity

Vue 3's reactivity system is built on native JavaScript features like Proxies, Set, Map, WeakMap, and Reflect.

#3about 3 minutes

Using ES6 proxies to intercept object operations

ES6 Proxies wrap a target object, allowing you to intercept operations like property access (get) and modification (set) using a handler.

#4about 3 minutes

Structuring dependency tracking with maps and sets

A nested data structure using WeakMap, Map, and Set is used to efficiently store dependencies from target objects to their properties and effects.

#5about 4 minutes

The roles of the track and trigger functions

The `track` function registers an effect as a dependency, while the `trigger` function executes all registered effects when a property changes.

#6about 7 minutes

Implementing a manual observer pattern from scratch

A simple observer pattern is built using `track` and `trigger` functions, demonstrating the need for manual calls to update state.

#7about 8 minutes

Automating tracking and triggering with proxy traps

The manual `track` and `trigger` calls are automated by placing them inside the `get` and `set` traps of an ES6 Proxy handler.

#8about 5 minutes

Refactoring proxy logic into a reusable reactive function

The proxy creation logic is encapsulated within a `reactive` function to easily convert any plain JavaScript object into a reactive proxy.

#9about 4 minutes

Managing effect scope with an active effect wrapper

An `activeEffect` variable and a wrapper function are used to ensure that dependencies are only tracked for the effect that is currently executing.

#10about 4 minutes

Connecting the custom reactivity engine to the DOM

The custom-built reactivity engine is used to automatically update the DOM in response to state changes, demonstrated with buttons and a color picker.

#11about 4 minutes

Answering questions on reactivity and browser support

The speaker addresses audience questions regarding React's hook-based approach, preventing duplicate effect registrations, and Vue 3's lack of support for IE11.