一次关于前端的内存泄漏

• 最近发现了公司的前端框架存在内存泄漏的问题，启动会占用浏览器大量的内存，并且时不时崩溃。排查发现，确实存在大量的内存泄漏，而且仅仅翻页，就会将内存从28.7慢慢的加到189。
  
  通过查看Chrome的Memory，发现确实存在大量的未回收对象（以 Detached 开头）。但是无法回收的对象，都是挂在Vue上的，感觉像是Vue框架的问题，不敢妄下定论，但此时一个比较奇怪的引用 _this2 倒是引起了我的注意。
  
  然后通过Chrome的Memory查看哪些函数占用了大量的资源。发现占用了大量资源的函数，仍然是Vue的代码，这就有点奇怪了，难道是Vue本身出的bug被我给碰上了么？但是理性上还是不太可能，对于成熟的广泛使用的框架，还是有一定的信任的。
  
  再往下翻的时候，开始找到了公司的前端框架代码。
  
  然后打开里面的内容，发现了大量的 var _this2 = this
  
  这里因为将this挂在了全局作用域上，导致即使关闭页面或者销毁组件，但是因为顶部作用域仍然持有该Vue对象的引用，所以无法被垃圾回收机制回收。这也就是为什么开始的时候，发现了很多 _this2 的引用。
  翻看源码，发现并没有主动声明 var _this2 = this，而是因为使用了setTimeout，虽然并没有主动声明挂载，但是因为setTimeout是异步，箭头函数最终会变成普通函数，所以 webpack 打包后就变成了上面var _this2 = this 这种主动声明在顶部作用域的情况。