How Vue 3 Timers Leak Memory and the Right Way to Fix Them
A common Vue 3 pattern using setInterval to display the current time contains several subtle but serious flaws that can cause memory leaks in production apps. The most critical issue is that the interval is never cleared on component unmount, meaning it continues firing indefinitely and holds references in memory. Vue 3.2 introduced onScopeDispose, which unlike onUnmounted works beyond component boundaries, including inside Pinia stores and composables. Additional problems include the timer firing relative to page load rather than at the top of the minute, and continuing to run even when the browser tab is hidden. Properly addressing these issues requires storing the interval reference, clearing it on scope disposal, aligning ticks to clock minutes, and pausing updates when the tab is not visible.