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.
49:00Marc Backes
44:40Alexander Lichter
44:11Mikhail Kuznetcov
44:31Rob Richardson
31:21Markus Hatvan
41:22Daniel Roe
59:15Alvaro Saburido
58:26Markus Oberlehner
Jobs that call for the skills explored in this talk.
APRIORI - business solutions AG
punkt.genau Personalberatung GmbH
Zebresel - Deine Agentur für d igitale Medien.