关键词：vue 项目优化、vue 开发优化

1、v-if和v-show

• 频繁切换时使用v-show，利用其缓存特性
• 首屏渲染时使用v-if，如果为false则不进行渲染

2、v-for的key

• 列表变化时，循环时使用唯一不变的key，借助其本地复用策略
• 列表只进行一次渲染时，key可以采用循环的index

3、侦听器和计算属性

• 侦听器watch用于数据变化时引起其他行为
• 多使用compouter计算属性顾名思义就是新计算而来的属性，如果依赖的数据未发生变化，不会触发重新计算

4、合理使用生命周期

• 在destroyed阶段进行绑定事件或者定时器的销毁
• 使用动态组件的时候通过keep-alive包裹进行缓存处理，相关的操作可以在actived阶段激活

5、数据响应式处理

• 不需要响应式处理的数据可以通过Object.freeze处理，或者直接通过this.xxx = xxx的方式进行定义
• 需要响应式处理的属性可以通过this.$set的方式处理，而不是JSON.parse(JSON.stringify(XXX))的方式

6、路由加载方式

• 页面组件可以采用异步加载的方式

7、插件引入

• 第三方插件可以采用按需加载的方式，比如element-ui。

8、减少代码量

• 采用mixin的方式抽离公共方法
• 抽离公共组件
• 定义公共方法至公共js中
• 抽离公共css

9、编译方式

• 如果线上需要template的编译，可以采用完成版vue.esm.js
• 如果线上无需template的编译，可采用运行时版本vue.runtime.esm.js，相比完整版体积要小大约30%

10、渲染方式

• 服务端渲染，如果是需要SEO的网站可以采用服务端渲染的方式
• 前端渲染，一些企业内部使用的后端管理系统可以采用前端渲染的方式

11、字体图标的使用

• 有些图片图标尽可能使用字体图标