vue内存泄露问题及处理方法

vue导致内存溢出的原因：

1. 接口数据量巨大，前端渲染时占用大量内存（解决方法：限制接口的返回数据，或者前端显示分批分页展示数据）；

2. v-if 频繁增删DOM节点（解决方法：离开页面时将控制v-if的变量设置为null）；

3. 代码中存在死循环或递归调用（解决方法：优化代码）；

4. echarts图未彻底删除（解决方法：如下图）；

if(this.chart != null && this.chart != "" && this.chart != undefined) {
     this.chart.dispose();//销毁
     this.chart.clear()；
}
this.chart = this.$echarts.init(
     document.getElementById("chart" + index)
);

5. 定时器未清除（解决方法：clearTimeout(timeoutId)或者clearInterval(timer)）；

6. 侦听器未清除；

7. 绑在EventBus的事件没有解绑（解决方法如下图）；

mounted () {
     this.$EventBus.$on('homeTask', res => this.func(res))
},
destroyed () {
     this.$EventBus.$off()
}

8. 使用了keep-alive（涉及到actived和deactivated钩子函数。组件移除时需要清理或改变数据，使用deactivated钩子函数）

vue如何释放内存（防止内存泄漏）:

1. 在mounted/created 钩子中绑定了DOM/BOM 对象中的事件，需要清理dom上绑定的事件监听，同时将引用的dom设置为null；

2. 执行结束后清理定时器 或者 非必要不用定时器，可以使用nextTick代替；

3. 使用了事件监听$ on，需要在beforeDestroy 中做对应解绑($ off)处理;

4. 变量先申明后使用，闭包执行完成后，将引用的局部变量赋值为null；

5. 使用了第三方库初始化，需要在beforeDestroy 中做对应解绑处理eg: this.map.remove();

6. 尽量使用原型对象去定义函数。

参考：https://xie.infoq.cn/article/fce58cf917ba85db9f052861f

参考：https://blog.csdn.net/weixin_46884182/article/details/123997723