How to debug Vue Apps
summary
A short, practical walk-through that reproduces a Vue reactivity bug in a small resource-gallery app (five cards) and shows why using a ref vs reactive for an array makes every card re-render; Vue DevTools’ performance tab and the onRenderTriggered hook prove five renders per click and reveal the culprit. The demo records the run with Replay.io, inspects framework internals (createElement runs ~198 times, createHref ~15), and retroactively adds Replay retro console logs to trace and fix it.
AI-written summary · about
chapters (6)
- 0:00Introduction
- 9:30Debugging Reactivity
- 17:46Other patterns
- 19:41What about the framework itself?
- 27:05Embrace bug intentionally
- 28:59Thank you!
related talks
21mAn Animated Guide to Vue 3 Reactivity and Internals
26mUnderstanding Vue's reactivity system by building one
23mAn Animated Guide to Vue 3 Reactivity and Internals
45mThe gears of Vue reactivity
35mCommon Mistakes in Vue.js and How to Avoid Them
24mDeveloping Weweb: VueJs Performance optimization on a large webapp
38mReact as a Developer Health Tool
55mWhat is a Vue Component