Building Vue 3 On Stage
summary
Builds a simplified Vue 3 reactivity engine live on stage using plain JavaScript: an object-to-proxy wrapper with ES6 Proxy over getters/setters, a Set-based dep for effects, and a track/trigger effect system driven by an activeEffect flag. Implements effect(fn) that auto-collects dependencies, wires buttons and an input to update DOM, and resolves initial pitfalls. The demo ends as a working prototype in roughly 30–40 lines of code, not a full production engine.
AI-written summary · about
chapters (12)
- 0:00Introduction and setup
- 2:56What is reactivity
- 7:13Reactivity architecture in Vue 3
- 11:06Starting the live coding demo
- 14:28Implementing track and trigger
- 17:18Introducing ES6 Proxies
- 24:27Creating the reactive function
- 27:18Implementing the effect function
- 30:14Finalizing the reactivity engine
- 31:40Updating the DOM for visualization
- 33:05Adding interactive UI elements
- 34:29Summary and conclusion
