1、一次完整的http请求 经历哪七个步骤

HTTP通信机制是在一次完整的HTTP通信过程中，Web浏览器与Web服务器之间将完成下列7个步骤：
1. 建立TCP连接
在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能进行更高层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80。
2. Web浏览器向Web服务器发送请求命令
一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令。例如：GET/sample/hello.jsp HTTP/1.1。
3. Web浏览器发送请求头信息
浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。
4. Web服务器应答
客户机向服务器发出请求后，服务器会客户机回送应答， HTTP/1.1 200 OK ，应答的第一部分是协议的版本号和应答状态码。
5. Web服务器发送应答头信息
正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。
6. Web服务器向浏览器发送数据
Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。
7. Web服务器关闭TCP连接
一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码：Connection:keep-alive
TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

2、vue的生命周期

总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

image.png

3、路由有哪几种导航钩子

全局导航钩子、组件内钩子、单独路由独享的钩子
第一种：全局导航钩子
router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子；
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
第三种：单独路由独享组件。
beforeEnter
每个钩子方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参
数。

4、vue 双向绑定的原理（常考）

vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
具体实现过程：
我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监
听器 Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者 Watcher 看是
否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器 Dep 来专门收集这
些订阅者，然后在监听器 Observer 和订阅者 Watcher 之间进行统一管理的。接着，我们还
需要有一个指令解析器 Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化
成一个订阅者 Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者 Watcher 接收
到相应属性的变化，就会执行对应的更新函数，从而更新视图。
因此接下去我们执行以下 3个步骤，实现数据的双向绑定：
1.实现一个监听器 Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者 Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器 Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据
以及初始化相应的订阅器。
流程图如下:

image.png

5、状态管理的使用vuex的一个使用以及它的原理

6、计算属性与watched的区别（常考）

7、vue组件的封装的过程（常考）

8、属性改变却没有渲染的解决方案

9、前端性能的优化有哪些方案

10、cnd加速

11、优雅降级与渐进增强是什么意思

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。

12、px,em,rem的区别

px 像素单位 相对于显示器分辨率(无法
自适应大小)
em相对单位，相对于父元素
rem 相对单位 相对于html根节点

13、webpack 与 gulp 的区别

参考答案：
gulp 强调的是前端开发的工作流程，我们可以通过配置一系列的 task，定义 task
处理的事务（例如文件压缩合并、雪碧图、启动 server、版本控制等），然后定
义执行顺序，来让 gulp 执行这些 task，从而构建项目的整个前端开发流程。
webpack 是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资
源（图片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins
（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

14、loader与plugin的区别

15、v-show、与v-if的区别

相同点： 两者都是在判断 DOM 节点是否要显示。
不同点：
a.实现方式： v-if 是根据后面数据的真假值判断直接从 Dom 树上删除或重建元素节点。
v-show 只是在修改元素的 css 样式，也就是 display 的属性值，元素始终在 Dom 树上。
b.编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事
件监听和子组件； v-show 只是简单的基于 css 切换；
c.编译条件：v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真
时才开始局部编译； v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，
而且 DOM 元素始终被保留；
d.性能消耗：v-if 有更高的切换消耗，不适合做频繁的切换； v-show 有更高的初始渲染消
耗，适合做频繁的额切换。

16、vue怎么实现权限控制

17、router 的区别

$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个 route 对象，是一个局部
对象，包含 path,params,hash,query,fullPath,matched,name 等路由信息参数

$router 为 VueRouter 的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。