vue中的内存泄漏

理解：
内存泄漏（memory leak）
比如：new了一个对象之后，它申请占用了一块堆内存，当把这个对象指针置为null时或者离开作用域导致被销毁，那么这块内
存没有人引用它了在JS里面就会被自动垃圾回收。但是如果这个对象指针没有被置为null，且代码面
没办法再获取到这个对象指针了，就会导致无法释放掉它指向的内存，也就是说发生了内存泄露。

再比如：程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存。对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏。

内存溢出原因：

1. 接口数据量巨大，前端渲染时占用大量内存。（限制接口的返回数据，或者前端显示分批分页展示数据。）
2. v-if 频繁增删DOM节点，若变量未置为null，则其内部的dom元素则不会释放；
3. 代码中存在死循环或递归调用；
4. echarts图未彻底删除；
5. 定时器未清除；
6. 侦听器未清除；
7. 绑在EventBus的事件没有解绑；
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. 尽量使用原型对象去定义函数，

mounted () {
    window.addEventListener('resize', this.onResize)
},
beforeDestroy () {
	window.removeEventListener('resize', this.onResize)
	
    this.timer && clearInterval(this.timer)
}

mounted () {
   Bus.$on('title',this.titleHandle) 
},
destroyed () {
   Bus.$off('title',this.titleHandle)
}

以下参考：https://blog.csdn.net/mo3408/article/details/124636526

如何判断内存泄漏
Chrome 浏览器memory有3种方式，可以分析内存：

Heap snapshot - 用以打印堆快照，堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配

Allocation instrumentation on timeline - 在时间轴上记录内存信息，随着时间变化记录内存信息。

Allocation sampling - 内存信息采样，使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。

如何定位内存泄漏
点击快照-并hover右测的列表项，会显示部分存在内存泄漏的地方