浏览器垃圾回收机制与 Vue 项目内存泄漏场景分析

调用 addEventListener 添加事件监听后在 beforeDestroy 中调用 removeEventListener移除对应的事件监听。为了准确移除监听，尽量不要使用匿名函数或者已有的函数的绑定来直接作为事件监听函数。

mounted() { 
 const box = document.getElementById('time-line') 
 this.width = box.offsetWidth 
 this.resizefun = () => { 
 this.width = box.offsetWidth 
 } 
 window.addEventListener('resize', this.resizefun) 
 }, 
 beforeDestroy() { 
 window.removeEventListener('resize', this.resizefun) 
 this.resizefun = null 
 } 

4.5 观察者模式引起的内存泄漏

在 spa 应用中使用观察者模式的时候如果给观察者注册了被观察的方法，而没有在离开组件的时候及时移除，可能造成重复注册而内存泄漏;

举个栗子：进入组件的时候 ob.addListener("enter",_func)，如果离开组件 beforeDestroy 的时候没有 ob.removeListener("enter",_func)，就会导致内存泄漏。

更详细的栗子参考：德州扑克栗子

4.6 上下文绑定引起的内存泄漏

有时候使用 bind/apply/call 上下文绑定方法的时候，会有内存泄漏的隐患。

var ClassA = function(name) { 
 this.name = name 
 this.func = null 
} 
var a = new ClassA("a") 
var b = new ClassA("b") 
b.func = bind(function() { 
 console.log("I am " + this.name) 
}, a) 
b.func() // 输出: I am a 
a = null // 释放a 
//b = null; // 释放b 
//b.func = null; // 释放b.func 
function bind(func, self) { // 模拟上下文绑定 
 return function() { 
 return func.apply(self) 
 } 
} 

使用 chrome dev tool>memory>profiles 查看内存中 ClassA 的实例数，发现有两个实例， a和 b。虽然 a 设置成 null 了，但是 b 的方法中 bind 的闭包上下文 self 绑定了 a，因此虽然 a释放，但是 b/b.func没有释放，闭包的 self 一直存在并保持对 a 的引用。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!