vue的项目优化---回顾

陆陆续续也用vue开发或重构了不少项目，在这期间遇到不少的坑，也尝试过优化。在此记录一下，想到一点算一点吧：

一、尽可能的减少watcher的数量

　  当监听数据是一个对象的时候，最好具体到监听对象的属性；

二、渲染

　　1、可以用懒加载、分页、滚动加载或者tab方式去展示其他内容，减少每次渲染的数量；

　    2、结合v-if，异步显示dom结构，减少不必要组件的加载；

　　3、hybird开发的app，可通过app框架预加载的方式，将单页应用的资源提前缓存。

三、key值

　　给列表渲染加上唯一的key值，提高缓存命中率，避免重复创建和大规模的重新渲染。

四、关于组件

　　1、组件有明确含义，只处理类似的业务。复用性越高越好，配置性越强越好。

　　2、减少组件之间的耦合度，尽量避免一个值传递通过多层组件的情况

　　3、使用require.ensure不把所有组件打包进index.js，减少体积。这很好的利用分段加载，但是却增加了请求数，看情况吧；

4、异步组件，使用setTimeout(fn,0)等;

　　5、动态组件和异步组件。如keep-alive :可以使被包含的组件保留状态，或避免重新渲染。注意给组件取个名字；

　　6、按需加载

　　　　a、用v-if方式，创建和结束生命周期

　　　　b、components中使用require引入；

五、关于路由

　　路由的懒加载（按需加载）

component:function(resolve){
  require(['src/component/header.vue'],resolve)
}

六、打包优化

　　2、把一些公共库打包进vender中，更好的利用缓存；

　　3、第三方库尽量瘦身之后再使用，比如element-ui中的按需加载；

七、网络请求

　　1、并发请求，如使用promise.all()的方式并发请求非继承关系的接口数据，也要看情况。

　　2、非首次必须要渲染数据，尽量采用响应的操作，如结合用户操作之后才发起请求等；

八、服务端渲染和骨架图

-------慢慢补充-------

《vue项目中遇到的坑》