Vue 3 Reactivity under the hood
summary
Shows that Vue 3 swaps Object.defineProperty for Proxy and Reflect and organizes dependencies with targetMap/depMap and WeakMap instead of per-property descriptors. Implements a tiny reactive engine: a dependency Set, track/trigger, a reactive(proxy) wrapper and watchEffect to register effects. The live demo wires price and quantity to a computed total and a color input, updates the DOM instantly, and the simplified implementation works; full source (complete target map version) is linked.
AI-written summary · about
chapters (7)
- 0:00Start
- 3:31Ingredients
- 3:58Dependency class
- 5:04Making the data reactive
- 9:26Proxy
- 10:03Organization of data
- 12:21Terminology
related talks
22mTaking Vue.js to the Backend
19mReactivity in Frontend JavaScript Frameworks
26mUnderstanding Vue's reactivity system by building one
50mVue 3.0 Updates
24mVue js in Practice: Hybridizing Objects and Functions
15mState of Vue (2k19 Q3)
49mA comparison of the Reactivity Concepts in Angular, React, Vue and Svelte
36mVue 3 | Looking into the Vueture: Composition Functions