第一类：
1、书写习惯：不要把所有的数据都放在data中，可以把响应式的数据放在data中，非响应式数据可以放在created钩子中，放在data中的数据会被(vue)自动添加getter和setter属性，每一次获取数据时都会调用getter,每一次修改数据时都会调用setter，所以性能不高；
2、可以使用SPA，每个页面只渲染一个完整的html页面，页面更简洁，且便于维护；使用keep-alive实现组件的缓存，当由一个组件切换到另一个组件时，可以把前一个组件的护数据缓存再来，当再次切换回去时就不需要重新加载数据了；
3、写一个路径匹配一个路由，这样不利于SEO，此时我们可以使用预渲染模式；
4、能拆分的组件尽可能拆分，颗粒度尽可能小，提高代码的可维护性；
5、v-if和v-show的区别，v-if控制的是一个组件有还是没有，v-show控制的是css的display属性，如果频繁让一个组件显示与隐藏，尽量使用v-show,如果不频繁，可以使用v-if;
6、关于v-for,使用v-for时必须绑定key,一般使用id作为key,而不是index,原因是：比如，我们要对一组数据进行排序，如果使用id作为key,那么交换顺序时只需要交换需要更改位置的元素即可，而如果使用index作为key,可能会重新渲染，会造成性能浪费；
7、Object.freeze,也会实现数据劫持；
Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。
export default {
data: () => ({
users: {}
}),
async created() {
const users = await axios.get("/api/users");
this.users = Object.freeze(users);
}
8、路由使用懒加载模式；
9、动态导入组件，按需导入；
第二类：
图片使用懒加载模式，第三方模块按需导入；
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：
（1）安装插件
npm install vue-lazyload --save-dev
（2）在入口文件 man.js 中引入并使用
import VueLazyload from 'vue-lazyload'
或者添加自定义选项
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
（3）在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：
<img v-lazy="/static/img/1.png">
以上为 vue-lazyload 插件的简单使用，如果要看插件的更多参数选项，可以查看 vue-lazyload 的 github 地址
vue-lazyload之npm详解
第三类：
从提升用户体验角度来讲，
1、可以使用骨架屏，loading等来提升用户体验，
2、也可以使用pwa做缓存，可以让用户在断开网络的情况下也可以读取一些信息
3、项目上线时可以使用shell包裹层包裹一下
第四类：
如果网络环境非常不好，可能会出现白屏，此时我们可以使用预渲染，比如一些公司的网站的首页，数据不经常改变，此时我们可以使用预渲染技术，但是对于一些新闻网站，预渲染就不适用了，因为数据一般是实时更新的；
第五类：
可以从后端角度触发，使用压缩，缓存等方式优化项目；
