1、v-if 和 v-show
频繁切换时使用v-show,利用其缓存特性
首屏渲染时使用v-if,如果为false则不进行渲染
2、v-for的key
列表变化时,循环时使用唯一不变的key,借助其本地复用策略
列表只进行一次渲染时,key可以采用循环的index
3、侦听器和计算属性
侦听器watch用于数据变化时引起其他行为
多使用compouter计算属性顾名思义就是新计算而来的属性,如果依赖的数据未发生变化,不会触发重新计算
4、合理使用生命周期
当一个组件被销毁时,清除组件中添加的全局事件和定时器等
使用动态组件的时候通过keep-alive包裹进行缓存处理,相关的操作可以在actived阶段激活
5、数据响应式处理
不需要响应式处理的数据可以通过Object.freeze处理,或者直接通过this.xxx = xxx的方式进行定义
需要响应式处理的属性可以通过this.$set的方式处理,而不是JSON.parse(JSON.stringify(XXX))的方式
6、插件引入
第三方插件可以采用按需加载的方式,比如element-ui。
7、减少代码量
采用mixin的方式抽离公共方法
抽离公共组件
定义公共方法至公共js中
抽离公共css
8、编译方式
如果线上需要template的编译,可以采用完成版vue.esm.js
如果线上无需template的编译,可采用运行时版本vue.runtime.esm.js,相比完整版体积要小大约30%
9、渲染方式
服务端渲染,如果是需要SEO的网站可以采用服务端渲染的方式
前端渲染,一些企业内部使用的后端管理系统可以采用前端渲染的方式
10、字体图标的使用
有些图片图标尽可能使用字体图标
11、图片懒加载
页面只渲染当前可视区域内的图片,减少了其他图片渲染数量
12、路由懒加载
不同路由对应的组件分割成不同的代码块,当路由被访问的时候才加载对应的组件