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的变化,只重新渲染变化了的部分,而没有变化的部分则不会重新渲染。