Reactivity is explained as an automated observer pattern where changes to data trigger updates wherever that data is used.
ES6 Proxies wrap objects and allow interception of operations like getting or setting properties, which is the foundation for Vue 3's reactivity.
The system uses a WeakMap to store a Map for each object, which in turn stores a Set of effects for each property.
The initial code shows how changing a product's price or quantity requires manually recalculating the total each time.
The `track` function adds an effect to a Set, and the `trigger` function iterates over the Set to execute all tracked effects.
A `reactive` function is created using an ES6 Proxy to intercept property access, with `get` handlers calling `track` and `set` handlers calling `trigger`.
The `effect` function wraps a piece of code, sets it as the `activeEffect`, and runs it once to automatically track all accessed reactive properties.
The final step demonstrates the complete system by linking the reactive state to DOM elements, which update automatically when the state changes.
The speaker answers questions about proxy performance, nested objects, career journey, and identifying reactive objects in a large codebase.
Hubert Burda Media
München, Germany
Sensory-Minds GmbH
Offenbach am Main, Germany
49:00Marc Backes
44:40Alexander Lichter
44:11Mikhail Kuznetcov
44:31Rob Richardson
58:26Markus Oberlehner
31:21Markus Hatvan
41:22Daniel Roe
59:15Alvaro Saburido
Jobs that call for the skills explored in this talk.
Multiplied
Roosendaal, Netherlands
knowmad Mood
Municipality of Madrid, Spain
Fenêtre Online Solutions
The Hague, Netherlands
Michael Page
Municipality of Madrid, Spain