Vue

1>意外的全局变量
函数中意外的定义了全局变量，每次执行该函数都会生成该变量，且不会随着函数执行结束而释放。

2>未清除的定时器
定时器没有清除，它内部引用的变量，不会被释放。

3>脱离DOM的元素引用
一个dom容器删除之后，变量未置为null，则其内部的dom元素则不会释放。

4>持续绑定的事件
函数中addEventListener绑定事件，函数多次执行，绑定便会产生多次，产生内存泄漏。

5>绑在EventBus的事件没有解绑

6>闭包引起内存泄漏
比如事件处理回调，导致DOM对象和脚本中对象双向引用。

7>使用第三方库创建，没有调用正确的销毁函数

8>单页应用时，页面路由切换后，内存未释放

JavaScript 有完善的内存处理机制，能自动进行垃圾回收，但是假如一个对象一直被引用，他的内存是无法得到释放的。如果项目运行过程中，内存占用越来越高，只增不减，没有峰值，就存在内存泄漏。多页应用我们可以通过页面刷新缓解，但是对于服务端渲染和单页应用则需要重点关注内存泄漏问题。本文主要以Vue单页应用展开，因为在 SPA 的设计中，用户使用它时是不需要刷新浏览器的，所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效。

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

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

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

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

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

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

四、常见的内存泄漏
意外的全局变量
函数中意外的定义了全局变量，每次执行该函数都会生成该变量，且不会随着函数执行结束而释放。

未清除的定时器
定时器没有清除，它内部引用的变量，不会被释放。

脱离DOM的元素引用
一个dom容器删除之后，变量未置为null，则其内部的dom元素则不会释放。

持续绑定的事件
函数中addEventListener绑定事件，函数多次执行，绑定便会产生多次，产生内存泄漏。

绑在EventBus的事件没有解绑

闭包引起内存泄漏
比如事件处理回调，导致DOM对象和脚本中对象双向引用。

使用第三方库创建，没有调用正确的销毁函数

单页应用时，页面路由切换后，内存未释放

五、解决内存泄漏
变量先申明后使用。

setTimeout setInterval清理 (最好不用)可以使用nextTick代替。

如果在mounted/created 钩子中绑定了DOM/BOM 对象中的事件，需要在beforeDestroy 中做对应解绑处理。

 1 mounted () {
 2 window.addEventListener('resize', this.onResize)
 3 },
 4 beforeDestroy () {
 5 window.removeEventListener('resize', this.onResize)
 6 }
 7 如果在mounted/created 钩子中使用了on，需要在beforeDestroy 中做对应解绑(off)处理。
 8 mounted () {
 9 this.$EventBus.$on('exitClassRoom',this.exitClassRoomHandle) 
10 },
11 destroyed () {
12 this.$EventBus.$off('exitClassRoom',this.exitClassRoomHandle)
13 }

如果在mounted/created 钩子中使用了第三方库初始化，需要在beforeDestroy 中做对应销毁处理。
慎用keep-alive
当你用 keep-alive 包裹一个组件后，它的状态就会保留，因此就留在了内存里，切莫在整个路由页面上加上keep-alive。
一旦你使用了 keep-alive，那么你就可以访问另外两个生命周期钩子：activated和 deactivated。你需要在一个 keep-alive 组件被移除的时候，调用 deactivated 钩子进行清理或改变数据。

六、实际案例
教师工作台是单页应用，在来回切换路由时，页面耗用内存在一直上升。

通过全局搜索，发现部分事件没有解绑，部分添加代码如下

按照上面的1-5方法解决后，内存耗用还是在增长，怀疑不是组件内部的问题，从头开始读代码，发现问题：keep-alive绑定在了整个router-view上，而且代码写得很不友好，路由不同router-view也不同，代码如下：

 1 <keep-alive>
 2 <el-container class="teacher-content" v-if="
 3 ['teacherWorkbenchCourse', 'teacherWorkbenchReschedule'].indexOf(
 4 this.$router.currentRoute.name
 5 ) === -1
 6 " key="teacher-content">
 7 <el-header class="body-banner">
 8 
 9 <Banner>
10 <DhProductLineSelect v-if="this.$router.currentRoute.name == 'teacherWorkbench'"></DhProductLineSelect>
11 <template v-if="
12 this.$router.currentRoute.name == 'personMaterial' ||
13 this.$router.currentRoute.name == 'contentCloud'
14 ">
15 <BreadCrumbMaterial></BreadCrumbMaterial>
16 </template>
17 <template v-if="
18 this.$router.currentRoute.name == 'searchResult' || this.lessonIsEdit">
19 <span class="router-go-back">
20 <img src />
21 </span>
22 </template>
23 <template v-if="!this.lessonIsEdit">
24 <BreadCrumbs />
25 </template>
26 </Banner>
27 </el-header>
28 <el-main class="body-main">
29 
30 <router-view></router-view>
31 </el-main>
32 </el-container>
33 
34 <router-view v-else> </router-view>
35 </keep-alive> 
36 优化后：
37 
38 <el-container
39 class="teacher-content"
40 key="teacher-content"
41 >
42 <el-header class="body-banner" :class="[headClass, marginLeft]">
43 
44 <Banner>
45 <DhProductLineSelect v-if="this.$router.currentRoute.name == 'teacherWorkbench'||this.$router.currentRoute.name=='teacherWorkbenchCourse'"></DhProductLineSelect>
46 <template
47 v-if="
48 this.$router.currentRoute.name == 'personMaterial' ||
49 this.$router.currentRoute.name == 'contentCloud'
50 "
51 >
52 <BreadCrumbMaterial></BreadCrumbMaterial>
53 </template>
54 <template
55 v-if="
56 this.$router.currentRoute.name == 'searchResult' || this.lessonIsEdit"
57 >
58 <span class="router-go-back">
59 <img src />
60 </span>
61 </template>
62 
63 <template v-if="!this.lessonIsEdit">
64 <BreadCrumbs/>
65 </template>
66 </Banner>
67 </el-header>
68 <el-main :class="['body-main',mainNoPadding]">
69 <router-view></router-view>
70 </el-main>
71 </el-container>

综上操作，内存耗用截图如下,无用内存大部分得到释放：