首先，了解一下内存泄漏的概念：

程序在不需要使用某些对象或数据时，没有及时释放它们的内存，导致内存使用量不断增加，最终可能导致性能下降甚至浏览器崩溃。

比如：我在首页组件index.vue中定义了很多定时器setTimeout和全局变量，没有对定时器执行clearTimeout，也没有将全局变量清除掉，然后我切到个人中心user.vue中了，那这些定时器和全局变量还一直在内存里。一个页面还好，要是很多页面全是这种，那岂不是一会儿内存就爆了？这样的情况就被称为内存泄露。

会引起内存泄漏的原因

1. 莫名的全局变量

（1）变量未声明

<code>// 未声明的变量默认使用window创建，即全局变量。

function fnA() {

a = 123

}

fnA()

（2）this创建变量

// this指向的是永远是调用者

function fnB() {

this.a = 123

}

// 这里的fnB隐式调用，等价于window.fnB()，所以this指向的就是其调用者window

fnB()

全局变量还是要尽可能少用，如果用了，在合适的情况下，将其释放（将其赋值null或undefined）

2. 未清理的定时器

let timer1 = setTimeout(() => {

console.log(123)

}, 1000);

let timer2 = setInterval(() => {

console.log(123)

}, 1000);

// 在适当时机清除

clearTimeout(timer1);

clearInterval(timer2);

3. 闭包

闭包可以创建一个独立的环境，能让外部访问函数内部变量，但同时局部变量会常驻在内存中，长时间不被释放，造成内存泄漏。

（1）局部变量避免使用很大的对象

// 局部变量避免使用很大的对象

function createClosure() {

let largeObject = {

......

};

return function() {

console.log(largeObject);

};

}

// 大对象从外部传

function createClosure(largeObject) {

return function() {

console.log(largeObject);

};

}

（2）手动释放引用

function createClosure() {

let largeObject = {

......

};

let closure = function() {

console.log(largeObject);

};

// 使用完毕后清理

largeObject = null;

return closure;

}

希望能帮到你！