Five Common Vue.js Pitfalls Explained: Timers, Reactivity, and Cleanup

A developer walkthrough published on DEV Community breaks down five frequently misunderstood Vue.js concepts through practical analogies and code examples. One key issue covered is timer drift, where repeated use of setInterval causes cumulative delays because JavaScript's single-threaded nature means callbacks can fire slightly late, and the gap compounds over time. The article recommends recursive setTimeout as a fix, since it recalculates each interval from the actual wall-clock time, allowing the timer to self-correct after minor delays. It also distinguishes between Vue's ref and shallowRef, explaining that shallowRef only tracks replacement of the entire value rather than changes to nested properties, making it more efficient for immutable objects. Finally, the piece addresses component cleanup, highlighting the role of onScopeDispose in stopping timers and removing event listeners when a component unmounts.