How to Detect, Diagnose, and Fix Memory Leaks in Vue Single-Page Apps

What Is a Memory Leak

When a program allocates memory that is never released, the memory usage continuously grows, degrading performance or causing crashes. In JavaScript, objects that remain referenced cannot be garbage‑collected, leading to leaks especially in long‑running single‑page applications.

How to Identify Memory Leaks

Chrome provides three analysis methods:

Heap snapshot – captures a snapshot of JavaScript objects and DOM nodes.

Allocation instrumentation on timeline – records memory allocation over time.

Allocation sampling – samples allocations with minimal overhead, offering a good approximation of allocation stacks.

How to Locate Memory Leaks

Use the above tools to trace growing memory usage back to specific components or code paths.

Common Memory Leak Patterns

Accidental global variables created inside functions.

Timers that are not cleared.

References to DOM elements after the element is removed.

Repeated event listeners added without removal.

EventBus listeners that are never unbound.

Closures that capture DOM nodes and create circular references.

Third‑party libraries without proper destroy calls.

SPA route changes that leave component state in memory.

Solutions to Prevent Leaks

Declare variables before use.

Avoid setTimeout/setInterval when possible; use nextTick instead.

Unbind DOM/BOM event listeners in beforeDestroy if added in mounted.

mounted() {
  window.addEventListener('resize', this.onResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.onResize);
}

Unsubscribe EventBus events in beforeDestroy.

mounted() {
  this.$EventBus.$on('exitClassRoom', this.exitClassRoomHandle);
},
destroyed() {
  this.$EventBus.$off('exitClassRoom', this.exitClassRoomHandle);
}

Destroy third‑party library instances in beforeDestroy.

Use keep-alive cautiously; when a component is wrapped, its state persists, so clean up in deactivated.

Real‑World Case: Teacher Workbench SPA

The application’s memory usage kept rising after route switches. Investigation revealed unremoved events and a keep-alive wrapper applied to the entire router-view, causing component states to stay in memory.

Original problematic markup:

<keep-alive>
  <el-container v-if="['teacherWorkbenchCourse','teacherWorkbenchReschedule'].indexOf(this.$router.currentRoute.name)===-1" key="teacher-content">
    <el-header class="body-banner">
      <Banner>
        ...
      </Banner>
    </el-header>
    <el-main class="body-main">
      <router-view></router-view>
    </el-main>
  </el-container>
  <router-view v-else></router-view>
</keep-alive>

After refactoring, the keep-alive was removed and the layout simplified:

<el-container class="teacher-content" key="teacher-content">
  <el-header class="body-banner" :class="[headClass, marginLeft]">
    <Banner>
      ...
    </Banner>
  </el-header>
  <el-main :class="['body-main', mainNoPadding]">
    <router-view></router-view>
  </el-main>
</el-container>

Post‑optimization screenshots showed that most unused memory was released, confirming the effectiveness of the fixes.