Marc Backes
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.
Featured Partners
Related Videos
49:00Under The Hood of Vue 3 Reactivity
Marc Backes
44:40petite-vue - Progressively enhancing every application?
Alexander Lichter
44:11Vue3 practical development
Mikhail Kuznetcov
44:31Vuejs and TypeScript- Working Together like Peanut Butter and Jelly
Rob Richardson
31:21Why I Recommend Svelte to Every New Web Developer
Markus Hatvan
58:26TDD for Vue.js Developers
Markus Oberlehner
41:22Building Better with Nuxt 3
Daniel Roe
59:15TresJS a new declarative ThreeJS as Vue components
Alvaro Saburido
From learning to earning
Jobs that call for the skills explored in this talk.
Full Stack Developer - VUE.JS
Exceltic
Municipality of Valladolid, Spain
Intermediate
CSS
GIT
HTML
Bash
Python
+6
Lead Full Stack Engineer (.Net, Vue/React) - Fully Remote
CoverGo
Chiva, Spain
Remote
Intermediate
.NET
REST
Azure
React
+9
Lead Full Stack Engineer (.Net, Vue/React) - Fully Remote
CoverGo
Municipality of Seville, Spain
Remote
Intermediate
.NET
REST
Azure
React
+9