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.
Hubert Burda Media
München, Germany
€80-95K
Intermediate
Senior
JavaScript
Node.js
+1
Matching moments
02:13 MIN
Exploring the core technologies behind Vue 3 reactivity
Under The Hood of Vue 3 Reactivity
02:31 MIN
Introducing petite-vue for lightweight reactivity
petite-vue - Progressively enhancing every application?
04:19 MIN
Answering questions on reactivity and browser support
Under The Hood of Vue 3 Reactivity
07:48 MIN
Navigating state management patterns and their trade-offs
Lessons learned from building a thriving Vue.js SaaS application
01:27 MIN
Understanding the core concept of reactivity
Under The Hood of Vue 3 Reactivity
03:46 MIN
Creating observable state with JavaScript proxies
The Naked Web Developer: Your Browser Is Your Framework
07:42 MIN
Defining true reactivity in modern frameworks
Angular Signals: what's all the fuss about?
04:25 MIN
Connecting the custom reactivity engine to the DOM
Under The Hood of Vue 3 Reactivity
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
58:26TDD for Vue.js Developers
Markus Oberlehner
31:21Why I Recommend Svelte to Every New Web Developer
Markus Hatvan
41:22Building Better with Nuxt 3
Daniel Roe
59:15TresJS a new declarative ThreeJS as Vue components
Alvaro Saburido
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Multiplied
Roosendaal, Netherlands
Remote
€5K
Intermediate
CSS
SASS
Scrum
+4
Volkers Nijkerk
Nijkerk, Netherlands
€3-5K
API
Vue.js
Docker
Laravel
+3
Optimus Search
Berlin, Germany
Remote
Intermediate
API
CSS
GIT
React
+4