编辑“︁Vue.js内存泄漏防范”︁

{{DISPLAYTITLE:Vue.js内存泄漏防范}}  
{{Note|本文面向Vue.js初学者及需要理解内存泄漏防范机制的中级开发者，包含基础概念、实际案例及优化策略。}}  

== 简介 ==  
'''内存泄漏'''是指程序中已动态分配的内存因未正确释放而无法被回收的现象。在Vue.js应用中，若组件、事件监听器或全局状态未及时清理，可能导致内存占用持续增长，最终影响应用性能。本节将详细分析Vue.js中常见的内存泄漏场景及其防范措施。  

== 常见内存泄漏场景 ==  
=== 1. 未销毁的事件监听器 ===  
在Vue组件中，手动添加的DOM事件监听器（如通过`addEventListener`）若未在组件销毁时移除，会导致监听器持续引用组件实例，阻止垃圾回收。  

<syntaxhighlight lang="javascript">  
// 错误示例  
export default {  
  mounted() {  
    window.addEventListener('resize', this.handleResize);  
  },  
  methods: {  
    handleResize() {  
      console.log('Window resized');  
    }  
  }  
};  

// 正确做法：在beforeUnmount或unmounted钩子中移除监听器  
export default {  
  mounted() {  
    window.addEventListener('resize', this.handleResize);  
  },  
  beforeUnmount() {  
    window.removeEventListener('resize', this.handleResize);  
  }  
};  
</syntaxhighlight>  

=== 2. 未清理的定时器 ===  
`setInterval`或`setTimeout`若未及时清除，会持续占用内存：  
<syntaxhighlight lang="javascript">  
// 错误示例  
export default {  
  mounted() {  
    this.timer = setInterval(() => {  
      console.log('Running...');  
    }, 1000);  
  }  
};  

// 正确做法  
export default {  
  mounted() {  
    this.timer = setInterval(() => {  
      console.log('Running...');  
    }, 1000);  
  },  
  beforeUnmount() {  
    clearInterval(this.timer);  
  }  
};  
</syntaxhighlight>  

=== 3. 全局状态残留 ===  
在Vuex或Pinia中，若组件未正确注销对全局状态的引用（如订阅或观察者），可能导致状态无法释放：  
<syntaxhighlight lang="javascript">  
// Vuex示例  
export default {  
  mounted() {  
    this.unsubscribe = this.$store.subscribe((mutation) => {  
      console.log(mutation.type);  
    });  
  },  
  beforeUnmount() {  
    this.unsubscribe(); // 必须取消订阅  
  }  
};  
</syntaxhighlight>  

== 高级场景与解决方案 ==  
=== 1. 动态组件与`v-if`指令 ===  
使用`v-if`切换组件时，Vue会销毁旧组件实例。但若子组件包含全局引用（如事件总线），需手动清理：  
<syntaxhighlight lang="javascript">  
// 事件总线示例  
import eventBus from './eventBus';  

export default {  
  mounted() {  
    eventBus.on('update', this.handleUpdate);  
  },  
  beforeUnmount() {  
    eventBus.off('update', this.handleUpdate);  
  }  
};  
</syntaxhighlight>  

=== 2. 第三方库的内存管理 ===  
某些库（如地图、图表库）需显式调用销毁方法：  
<syntaxhighlight lang="javascript">  
// 使用Leaflet地图库  
export default {  
  mounted() {  
    this.map = L.map('map').setView([51.505, -0.09], 13);  
  },  
  beforeUnmount() {  
    this.map.remove(); // 释放地图资源  
  }  
};  
</syntaxhighlight>  

== 检测内存泄漏 ==  
使用浏览器开发者工具的'''Memory'''面板：  
1. 记录堆快照（Heap Snapshot）对比组件挂载/卸载前后的内存差异。  
2. 通过'''Performance'''监控内存占用曲线。  

<mermaid>  
graph LR  
  A[组件挂载] --> B[内存增加]  
  C[组件卸载] --> D[内存未减少? 泄漏!]  
</mermaid>  

== 数学模型 ==  
内存泄漏的累积效应可表示为：  
<math>M(t) = M_0 + \sum_{i=1}^{n} \Delta m_i \cdot t_i</math>  
其中：  
- <math>M(t)</math>为时间<math>t</math>时的内存占用  
- <math>\Delta m_i</math>为第<math>i</math>次泄漏的增量  

== 总结 ==  
* 始终在`beforeUnmount`或`unmounted`生命周期中清理资源。  
* 对第三方库显式调用销毁API。  
* 定期使用开发者工具检测内存变化。  

{{Warning|忽略内存泄漏可能导致应用卡顿甚至崩溃，尤其在长期运行的SPA中！}}

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js性能优化]]