Vue：mixin、单文件组件、内存泄漏的原因与解决、虚拟DOM

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？

 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

 而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

     单纯组件引用：

          父组件 + 子组件 >>> 父组件 + 子组件

     mixins：

          父组件 + 子组件 >>> new父组件

作用：多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

单文件组件

就是使用脚手架搭建vue项目，然后每个组件都是单独的一个文件，里面有模板，js和css，然后再引用到父组件中

单页面应用

Vue是单页面应用，比如之前做的去哪儿网，只有一个根组件，里面是引入了一个个页面组件组成的，首屏加载时间较慢，不过页面之间切换很快

内存泄漏（内存浪费）

这个问题在单页应用 (SPA) 中尤为重要，因为在 SPA 的设计中，用户使用它时，是不需要刷新浏览器的，所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效。因此在vue开发过程中，你需要时刻警惕内存泄漏的问题，这些内存泄漏往往会发生在使用 Vue 之外的其它进行 DOM 操作的三方库时，请确保测试应用的内存泄漏问题并在适当的时机做必要的组件清理。

内存泄漏原因：

1、过多使用全局变量

2、闭包中的局部变量会一直保存在内存中，用完赋为null清空

3、定时器使用完没有清除，导致定时器的回调函数及其内部依赖的变量都不能被回收。

4、v-if：v-if绑定到false的值，但是实际上dom元素在隐藏的时候没有被真实的释放掉

5、vue-router：使用keep-alive包裹优化

虚拟DOM

所谓的虚拟DOM，实际上就是用JS来模拟DOM结构，把DOM的变化操作放在JS层来做，尽量减少对DOM的操作（个人认为主要是因为操作JS比操作DOM快了不知道多少倍， JS运行效率高）。然后比较前后两次的虚拟DOM的变化，只重新渲染变化了的部分，而没有变化的部分则不会重新渲染。