Vue在项目中的一些优化总结

简单写一下项目上使用 Vue 的经验，可以当作 checkList 来看，如果有不清楚的或者存疑的欢迎私下交流

引言

Vue是一个比较成熟的框架，很多事情框架层都已经帮我们做好了，那么简单列一下我们需要注意的一些事项。

构建优化

1.开启Tree Shaking，降低包大小；

不支持 Tree Shaking 的能换就换了吧；

2.分包，框架包单独打出利用CDN进行缓存，减少更新资源数量；

3.路由懒加载，避免一次性引入；

4.静态资源Gzip + 设置资源缓存；

5.静态资源要进行压缩，如图片等；

性能优化

1.keepAlive 进行缓存组件；

2.v-if、v-show合理使用；

3.v-for设置key，提升更新准确性和性能；

4.v-for遍历的同时不要用v-if；

v-for 的优先级要大于 v-if ，这样使用比较浪费性能；

5.根据场景使用函数式组件；

函数式组件不需要创建实例，整个开销较小，如果仅仅是展示的场景不妨使用函数式组件。

6.数据状态展平，层级不要过深；

7.对象的属性尽量在开局就声明好，能不变的就不要变；

一是可能导致Vue的响应式不生效，二是对象属性的改变会导致V8重建存储的隐藏类内容，降低性能。

8.慎用 slot，注意是慎用，用错了会出大问题；

slot 会间接导致当前组建订阅父组件的所有响应式，也就是父组件的所有变化都会引起当前组件的更新，显然会引起很多无用的更新，浪费性能。

9.进行合理的组件封装，增加可维护性以及提升性能；

提升性能主要是针对8中的情况，利用合理的组件封装减少因逻辑上无关的数据变动带来的频繁更新。

10.虚拟列表，只渲染窗口部分；

11.Defer 延迟渲染，优先渲染主要部分；

12.尽量避免副作用；

如 $set、$forceUpdate 等，一般都有其他解法，不要引入心智上的负担。
13.Object.freeze 冻结响应式；

根据场景使用，Object.freeze 能减少 getter/setter 的开销，对性能以及内存都有好处；

14.离线化；

不属于Vue了，凑在这里说明很重要，大家可以自行思考应用场景。

最后

说一下Vue优化大的两个原则，一是尽量减少渲染的节点数，二是优先保证主路径渲染。