vue项目中的优化

1. 不要在模板里面写过多表达式

2. 循环调用子组件时添加key

3. 频繁切换的使用v-show，不频繁切换的使用v-if

4. 尽量少用float，可以用flex

5. 按需加载，可以用require或者import()按需加载需要的组件

6. 合理使用路由懒加载、异步组件，拆分chunkName

7. 避免组件嵌套导致子组件强制更新

8. template中不直接使用$route的属性，$route是响应式的数据，因为路由跳转就会导致$route会重新赋值，也会触发vue的set(）函数更新，会触发组件重新更新，导致性能不好。可以定义一个computed属性，需要用到的地方都直接使用这个属性，减少因为路由导致组件的多次渲染。

9. <list :style="{display: 'flex', color: '#f00'}" /> style的对象永远都是新的值，在set()函数里面打条件断点，即使值是不变的，但是还是会走到断点里面，导致在set()对比的时候，都会直接去更新了。在页面组件中，应该用一个对象去引用着，而不是永远赋值新的对象。

10. 对于没用绑定dom的数据，有些没必要放到data里面，因为放到data就会被vue进行全量劫持，然后设置setter和getter，会收集对应的 watcher 。如果对象很大，节点很深，vue就会深度递归遍历劫持，这个递归遍历劫持会影响页面性能的原因之一。

11. 对于图片过多的页面，为了加速页面加载速度，可以使用vue-lazyload 插件，将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载，提高页面加载性能。

12. 对于只是页面展示用，不会有什么改变的数据，可以使用Object.freeze 冻结数据 ，避免vue劫持该数据，减少组件初始化的时间。

13. 拆分组件( 提高复用性、增加代码的可维护性，减少不必要的渲染 )。在开发中，见识过一个vue组件3000+行代码，其中html就有2000行左右，这种代码维护性是很差的，需要组件化设计。

14. 尽量采用runtime运行时版本

15. 减少dom元素的数量和深度

16. 骨架屏vue-skeleton-webpack-plugin，首屏加载，非首屏内容按需加载