vue项目内存泄漏、性能优化总结

最近在客户现场发现项目会有内存泄漏的情况，导致操作一天电脑就卡死，现大体总结如下：

1、$route的监听使用场景
2、大对象的使用，是否回收（手动置null）
3、store的使用
4、window的使用
5、addEventListener的使用，记得unbind
6、第三方工具的使用，记得unbind
7、event bus使用，记得off

目前定位的场景有：

1.console.log打印vue实例，会每次刷新页面导致内存+10M左右，所以发线上的时候请一定配置webpack打包时过滤，已经过滤debugger。（坑逼，居然log也是导致泄漏）

2.通过eventBus进行通信的时候，请在页面销毁时off掉，setTimeOut、addEventListener也是同理。

3.lodash等第三方库请按需引入，不然组件引了一次，子组件又引了一次，就是导致没必要的内存占用和泄漏的风险。

4.这种dispatch的操作也会导致内存泄漏。

this.$store.dispatch('transcap/monitor/getPositionHistory', {
        self: this,
        params: {
          transOrderPkId: orderId
        }
      })

5.Select组件添加transfer属性后每次弹出层都会在body里新增dom,不刷新浏览器无法被销毁。优化方案，每次点击tab上的刷新按钮手动清除class 有“v-transfer-dom"的dom，这种会有风险，建议在具体的页面或者小范围调整，不建议全局操作。

如有新的定位是持续记录~

大家排查自己项目的时候，一定不要考虑是不是vue框架有问题，或者vue3新特性有问题，一定要先排查自己的代码，因为大佬发出来的框架肯定是已经考虑过内存泄漏的问题了，所以我们这些菜鸡切莫怀疑是vue框架的问题。就快速定位快速解决吧~