各位观众老爷，大家好！今天咱们来聊聊 Vue 应用里那些神出鬼没的内存泄漏，以及如何用 DevTools 这把“照妖镜”把它们揪出来。内存泄漏就像家里水管没拧紧，一点点漏，开始没感觉，时间长了，水费单能让你怀疑人生！
开场白：内存泄漏，Vue 应用的隐形杀手
想象一下，你精心打造了一个 Vue 应用，功能炫酷，界面流畅。刚开始，一切都棒极了！但随着用户使用时间的增长，应用开始变得卡顿，甚至崩溃。你挠破头皮，却找不到问题的根源。恭喜你，很有可能，你的应用正在遭受内存泄漏的折磨！
内存泄漏是指程序在申请内存后，无法释放不再使用的内存空间，导致系统可用内存逐渐减少。在 Vue 应用中，内存泄漏会导致浏览器占用越来越多的内存，最终影响性能，甚至导致崩溃。
第一幕：Vue 应用内存泄漏的“罪魁祸首”
那么，在 Vue 应用中，哪些家伙容易成为内存泄漏的“帮凶”呢？
-
闭包的“甜蜜陷阱”
闭包是 JavaScript 中一个强大而又危险的特性。它允许函数访问并操作在其词法作用域之外的变量。这很方便，但如果使用不当，就会导致内存泄漏。
// 错误示范：闭包导致内存泄漏 export default { data() { return { message: 'Hello, world!', }; }, mounted() { let vm = this; // 将 Vue 实例引用到外部变量 setInterval(function() { console.log(vm.message); // 闭包引用了 vm }, 1000); }, beforeDestroy() { // 并没有清除 setInterval } };在这个例子中，
setInterval创建了一个闭包，这个闭包引用了 Vue 实例vm。即使组件被销毁，setInterval仍然在执行，并且vm也无法被垃圾回收，导致内存泄漏。解决方案： 在组件销毁时清除
setInterval。export default { data() { return { message: 'Hello, world!', intervalId: null, // 保存 intervalId }; }, mounted() { let vm = this; this.intervalId = setInterval(function() { console.log(vm.message); }, 1000); }, beforeDestroy() { clearInterval(this.intervalId); // 清除 interval this.intervalId = null; // 释放 intervalId }, }; -
事件监听的“单相思”
在 Vue 应用中，我们经常使用
addEventListener来监听 DOM 事件。但是，如果在组件销毁时没有正确地移除这些事件监听器，就会导致内存泄漏。// 错误示范：事件监听未解绑 export default { mounted() { window.addEventListener('resize', this.handleResize); }, methods: { handleResize() { console.log('Window resized!'); }, }, beforeDestroy() { // 忘记移除事件监听器 } };在这个例子中，组件在
mounted钩子中监听了resize事件，但是没有在beforeDestroy钩子中移除这个事件监听器。当组件被销毁时，resize事件仍然会被触发，并且会执行handleResize方法，导致内存泄漏。解决方案： 在组件销毁时移除事件监听器。
export default { mounted() { window.addEventListener('resize', this.handleResize); }, methods: { handleResize() { console.log('Window resized!'); }, }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); // 移除事件监听器 }, };Vue 特殊情况：使用
$on监听自定义事件Vue 提供的
$on方法用于监听组件实例上的自定义事件。同样，在使用$on监听事件后，需要在组件销毁时使用$off方法移除事件监听器。// 错误示范：$on 监听事件未解绑 export default { mounted() { this.$on('my-event', this.handleMyEvent); }, methods: { handleMyEvent() { console.log('My event triggered!'); }, }, beforeDestroy() { // 忘记移除事件监听器 } };解决方案： 在组件销毁时使用
$off移除事件监听器。export default { mounted() { this.$on('my-event', this.handleMyEvent); }, methods: { handleMyEvent() { console.log('My event triggered!'); }, }, beforeDestroy() { this.$off('my-event', this.handleMyEvent); // 移除事件监听器 }, }; -
DOM 引用的“藕断丝连”
在 Vue 应用中，我们经常使用
ref属性来获取 DOM 元素的引用。如果我们在组件销毁后仍然持有这些 DOM 元素的引用，就会导致内存泄漏。// 错误示范：DOM 引用未释放 export default { mounted() { this.myElement = this.$refs.myElement; // 保存 DOM 引用 }, beforeDestroy() { // 忘记释放 DOM 引用 } };在这个例子中，组件在
mounted钩子中获取了myElement的引用，并将其保存在this.myElement中。即使组件被销毁，this.myElement仍然持有这个 DOM 元素的引用，导致内存泄漏。解决方案： 在组件销毁时释放 DOM 引用。
export default { mounted() { this.myElement = this.$refs.myElement; }, beforeDestroy() { this.myElement = null; // 释放 DOM 引用 }, }; -
第三方库的“不靠谱”
有些第三方库可能存在内存泄漏的问题。如果你的 Vue 应用使用了这些库，就有可能受到影响。
解决方案：
- 选择信誉良好、维护活跃的第三方库。
- 定期更新第三方库到最新版本，以修复已知的内存泄漏问题。
- 在使用第三方库时，仔细阅读文档，了解其内存管理机制。
- 如果发现第三方库存在内存泄漏问题，可以尝试寻找替代方案，或者向库的作者提交 issue。
-
全局变量的“野蛮生长”
全局变量会一直存在于内存中，直到浏览器关闭。如果你的 Vue 应用中存在大量的全局变量，或者全局变量持有大量的对象引用，就会导致内存泄漏。
解决方案：
- 尽量避免使用全局变量。
- 如果必须使用全局变量，确保在使用完毕后及时释放其占用的内存。
- 使用模块化的方式组织代码，避免变量污染。
-
循环引用的“剪不断，理还乱”
循环引用是指两个或多个对象相互引用，形成一个环状结构。当这些对象不再被其他对象引用时，垃圾回收器无法回收它们，导致内存泄漏。
// 错误示范：循环引用 let obj1 = {}; let obj2 = {}; obj1.prop = obj2; obj2.prop = obj1; // 现在 obj1 和 obj2 形成循环引用，即使将它们设置为 null，垃圾回收器也无法回收它们 obj1 = null; obj2 = null;解决方案：
- 尽量避免创建循环引用。
- 如果必须创建循环引用，可以使用弱引用（WeakRef）或手动断开引用。
第二幕：DevTools，“照妖镜”在手，内存泄漏无处遁形
现在，我们已经了解了 Vue 应用中内存泄漏的常见原因。接下来，我们将学习如何使用 DevTools 来排查和分析内存泄漏。
DevTools 是浏览器自带的开发者工具，它提供了强大的内存分析功能。
-
打开 DevTools
在 Chrome 浏览器中，按下
F12键或右键点击页面，选择“检查”即可打开 DevTools。 -
选择 "Memory" 面板
在 DevTools 中，找到 "Memory" 面板，点击进入。
-
进行堆快照（Heap Snapshot）
点击 "Take heap snapshot" 按钮，DevTools 会创建一个当前堆内存的快照。堆快照包含了所有 JavaScript 对象的信息，包括对象的大小、类型、引用关系等。
-
比较堆快照
多次执行某些操作，例如切换路由、打开/关闭弹窗等。每次操作后，都创建一个堆快照。然后，可以使用 DevTools 提供的比较功能，比较不同堆快照之间的差异。
在堆快照列表中，选择两个要比较的快照，然后在 "Comparison" 下拉菜单中选择 "Summary"。DevTools 会显示这两个快照之间的差异，例如新增的对象、删除的对象、对象大小的变化等。
-
分析堆快照
通过分析堆快照，可以找出哪些对象在持续增长，哪些对象没有被正确释放。
- Constructor: 显示对象的构造函数，可以用来判断对象的类型。
- Shallow Size: 对象自身占用的内存大小（不包括其引用的对象）。
- Retained Size: 对象自身占用的内存大小，加上该对象被释放后，可以释放的其他对象占用的内存大小。这个值更能反映对象对内存的影响。
- Distance: 对象到 GC 根的距离。距离越远，说明对象越难被垃圾回收器回收。
可以点击 "Constructor" 列的标题进行排序，找出占用内存最多的对象类型。然后，可以点击对象，查看其引用关系，找到导致内存泄漏的根源。
案例分析：使用 DevTools 查找闭包导致的内存泄漏
假设我们有一个 Vue 组件，代码如下：
// leaky-component.vue
export default {
data() {
return {
count: 0,
};
},
mounted() {
setInterval(() => {
this.count++;
console.log(this.count);
}, 1000);
},
beforeDestroy() {
// 忘记清除 setInterval
},
};这个组件存在内存泄漏，因为 setInterval 创建的闭包引用了 this，导致组件实例无法被垃圾回收。
现在，我们使用 DevTools 来查找这个内存泄漏。
- 打开 DevTools，选择 "Memory" 面板。
- 加载包含 leaky-component.vue 的页面。
- 创建一个堆快照（Snapshot 1）。
- 重复创建和销毁 leaky-component.vue 组件几次。
- 创建一个新的堆快照（Snapshot 2）。
- 比较 Snapshot 1 和 Snapshot 2。
在比较结果中，我们可以看到 Closure 对象的数量显著增加。这说明存在闭包没有被正确释放。
点击 Closure 对象，查看其引用关系。我们可以看到 Closure 对象引用了 VueComponent 对象，而 VueComponent 对象就是我们的 leaky-component.vue 组件实例。
这说明 setInterval 创建的闭包引用了组件实例，导致组件实例无法被垃圾回收，从而导致内存泄漏。
解决方法：
在 beforeDestroy 钩子中清除 setInterval。
// leaky-component.vue (fixed)
export default {
data() {
return {
count: 0,
intervalId: null,
};
},
mounted() {
this.intervalId = setInterval(() => {
this.count++;
console.log(this.count);
}, 1000);
},
beforeDestroy() {
clearInterval(this.intervalId);
this.intervalId = null;
},
};表格总结：Vue 应用内存泄漏的常见原因及解决方案
| 原因 | 描述 | 解决方案 |
|---|---|---|
| 闭包 | 函数访问并操作在其词法作用域之外的变量，导致外部变量无法被垃圾回收。 | 1. 避免不必要的闭包。 2. 在组件销毁时，清除闭包引用的变量。 |
| 事件监听未解绑 | 组件销毁时，没有移除通过 addEventListener 或 $on 注册的事件监听器，导致事件回调函数仍然被执行。 |
1. 在组件销毁时，使用 removeEventListener 或 $off 移除事件监听器。 2. 使用 Vue 提供的事件修饰符，例如 .once，来自动移除事件监听器。 |
| DOM 引用未释放 | 组件销毁后，仍然持有通过 ref 属性获取的 DOM 元素的引用，导致 DOM 元素无法被垃圾回收。 |
在组件销毁时，将 DOM 引用设置为 null。 |
| 第三方库的缺陷 | 第三方库存在内存泄漏的问题。 | 1. 选择信誉良好、维护活跃的第三方库。 2. 定期更新第三方库到最新版本。 3. 在使用第三方库时，仔细阅读文档，了解其内存管理机制。 4. 如果发现第三方库存在内存泄漏问题，可以尝试寻找替代方案，或者向库的作者提交 issue。 |
| 全局变量的滥用 | 过多的全局变量，或者全局变量持有大量的对象引用。 | 1. 尽量避免使用全局变量。 2. 如果必须使用全局变量，确保在使用完毕后及时释放其占用的内存。 3. 使用模块化的方式组织代码，避免变量污染。 |
| 循环引用 | 两个或多个对象相互引用，形成一个环状结构，导致垃圾回收器无法回收它们。 | 1. 尽量避免创建循环引用。 2. 如果必须创建循环引用，可以使用弱引用（WeakRef）或手动断开引用。 |
总结：防微杜渐，打造健壮的 Vue 应用
内存泄漏是 Vue 应用中一个需要重视的问题。通过了解内存泄漏的常见原因，并掌握使用 DevTools 进行排查和分析的方法，我们可以有效地避免内存泄漏，打造健壮、高性能的 Vue 应用。记住，防微杜渐，从小处着手，才能避免“千里之堤，溃于蚁穴”的悲剧。
希望今天的讲座对大家有所帮助！如果大家还有什么疑问，欢迎随时提出。谢谢大家！