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.
Matching moments
03:41 MIN
Exploring the core technologies behind Vue 3 reactivity
Under The Hood of Vue 3 Reactivity
44:41 MIN
Answering questions on reactivity and browser support
Under The Hood of Vue 3 Reactivity
02:14 MIN
Understanding the core concept of reactivity
Under The Hood of Vue 3 Reactivity
08:57 MIN
Creating observable state with JavaScript proxies
The Naked Web Developer: Your Browser Is Your Framework
09:14 MIN
Defining true reactivity in modern frameworks
Angular Signals: what's all the fuss about?
40:16 MIN
Connecting the custom reactivity engine to the DOM
Under The Hood of Vue 3 Reactivity
02:31 MIN
Understanding the core concepts of React
React and the power of visualisation
06:51 MIN
How popular JavaScript libraries implement reactivity
Bringing back reactivity in "reactive" frontend
Featured Partners
Related Videos
49:00Under The Hood of Vue 3 Reactivity
Marc Backes
44:40petite-vue - Progressively enhancing every application?
Alexander Lichter
28:36Common Mistakes in Vue.js and How to Avoid Them
Daniel Kelly
28:43Bringing back reactivity in "reactive" frontend
Michał Moroz
30:40What the heck do "declarative" and "reactive" actually mean?
André Kovac
44:11Vue3 practical development
Mikhail Kuznetcov
40:19React and the power of visualisation
Daisy Muyldermans
41:43Modern Web Development with Nuxt3
Alexander Lichter
From learning to earning
Jobs that call for the skills explored in this talk.
[HR106] Senior Front-End Developer - Vue, Nuxt - (Remote, Full-Time) Asia
Smart Working Solutions
Remote
Senior
CSS
HTML
REST
Vue.js
+6