Vue项目优化
Vue项目优化？听说面试会有这个！
没办法！搞起来！
书写习惯
1. 数据规格化(不需要做响应式的数据不要放到data中)
不要把所有的数据都放到data中，只把你需要做响应式的数据放到data中。
如果一个数据放到了data中，vue会给这个数据添加一个getter和setter，当你获取数据调用getter，当你设置数据调用setter，性能不高。
具体内容可以参照vue中是如何实现MVVM(我还没写，点了没用(〃‘▽’〃))
2. SPA(Single Page web Application)(单页应用)
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。vue、react都是单页应用的一种，只有一个index.html，加载js,使用其中的路由。
路由跳转刷新可能会数据丢失，刷新的等待时间对用户也不友好，使用其中的keep-alive ，可以实现组件的缓存，把组件中的结构和数据全部缓存到内存，问题解决。
SPA不利于SEO(搜索引擎优化,就是爬虫)，可以使用SSR(服务器渲染)解决。
3. 组件颗粒化
组件是vue中的可复用的实例，我们应该尽可能得将组件拆分：
1) 提高代码利用率，增加代码的可维护性
2) 组件拆分可以减小不必要的渲染
4. 能用if不用show
这里的if和show分别是指v-if和v-show。
v-show 控制的是display样式，渲染页面却不显示
v-if 根本不会渲染页面
所以说能用v-if不用v-show
但要注意这并不是绝对的，如果页面需求频繁的显示隐藏，则使用v-show，毕竟v-show只渲染一次；如果不频繁的显示隐藏，则使用v-if。
5. 使用v-for时，必须加上key
众所周知，vue是虚拟DOM，正常完整的Vue项目中DOM树不止一个，数据一旦发生改变，有key的话可以迅速定位数据改变的位置，可如果没有key，DOM树又不少，遍历DOM树寻找数据发生改变的位置代价可不少。所以必须加上key。
key的值也是有讲究的，一般情况下，不要使用index，也就是索引，作为key的值，而是尽可能的使用id作为key的值。
举个栗子：现有 [{id:“a”,value:“aaa”},{id:“b”,value:“bbb”},{id:“c”,value:“ccc”}]
==> [{id:“c”,value:“ccc”},{id:“b”,value:“bbb”},{id:“a”,value:“aaa”}]
使用索引，感觉凉凉
| key | 值 | key | 值 | |
|---|---|---|---|---|
| 1 | aaa | 1 | ccc | |
| 2 | bbb | 2 | bbb | |
| 3 | ccc | 3 | aaa |
如果使用id 就不需要重新渲染了
| key | 值 | key | 值 | |
|---|---|---|---|---|
| a | aaa | c | ccc | |
| b | bbb | b | bbb | |
| c | ccc | a | aaa |
没错，目的就是要减少不必要的渲染
6. Object.freeze()方法
Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改
vue 1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换。
如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。
7. 路由懒加载
路由懒加载实现Vue路由懒加载有三种方式：
- vue异步组件
- es提案的import()
- webpack的require,ensure()
目的当然就是实现路由的有需加载，如es提案的import()就是用到那个加载那个，可以大大减少第一次加载慢的问题，毕竟非路由懒加载第一次就把所有路由都加载一遍，慢是肯定的。
8. 动态导入组件
路由都懒加载了，组件当然不能落后。
动态导入组件有四种方式：
1、使用import导入组件，可以获取到组件
2、使用import导入组件，直接将组件赋值给componet
3、使用require 导入组件，可以获取到组件
4、使用require 导入组件，直接将组件赋值给componet
动态导入组件目的就是为了减少不必要的渲染。
页面加载
前面的路由懒加载、动态导入组件是编写代码时就可以实现的，但一个项目当然不止代码一块。提高Vue项目质量，页面加载是看得见的，很重要。
1. 图片懒加载
项目实现的页面没有会图片很单调也不现实，但图片的加载需要时间，少量的话还可以接受，但如果量大又一次加载完，时间上是很难让他人接受的(我同样接受不了)，于是我们需要图片懒加载。
先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。
这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。
2. 第三方模块按需导入
项目中我们总会使用很多的第三方模块，有些页面使用到了而有些则没有，如果不是按需导入，会有一些性能上的浪费，可以在webpack中设置第三方模块按需导入，社区也有很多的资源。
提升用户体验
项目好不好，用了才知道。用户的需求是非常重要的需求，用户的意见是非常重要的意见，提升用户体验势在必行。
1. 骨架屏
骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。
使用插件vue-skeleton-webpack-plugin，项目地址page-skeleton-webpack-plugin
2. pwa
PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。
web应用更加易于发现——相比于安装应用，访问一个网站显然更加容易和迅速，并且你可以通过一个链接来分享web应用。
在另一方面，原生应用与操作系统可以更加完美的整合，也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行，并且相较于使用浏览器访问，用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。
PWA赋予了我们创建同时拥有以上两种优势的应用的能力。
SEO
SEO (搜索引擎优化) 能让网站在搜索引擎结果中更加清晰, 也帮助我们将搜索结果更靠前。
搜索引擎抓取网页，跟随页面之间的链接，并索引找到的内容。
1. 预渲染死数据
如果网络环境非常不好，可能出来白屏，而且有些项目的有些信息是不变的，比如公司的名称等等，这个时候可以通过预渲染死数据来提升，通过插件来实现。
2. SSR
SSR 又称服务器渲染，简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。
SSR有利于SEO，还有利于首屏渲染
后端角度
后端主要提供数据，所以需要我们懂得HTTP的相关知识。
1. 缓存
服务器提供的数据可以适当的缓存在客户端，这不仅能大大缓解服务器端的压力，还可以使客户端的用户体验升级。
这当然是服务器端做的事，在header中设置。
2. 压缩
服务器端提供数据，可以使用数据压缩使数据传输变得高效安全。压缩取决于数据的类型，通常我们使用gzip无损压缩。
end
时间不多，之后再补充，大佬们可以在评论里留言啊！（手动卖萌）