2020前端面试题（HTTP、Vue）

HTTP押题

1. HTTP的请求头和响应头知道多少？

  HTTP报文由三部分组成：请求行、 请求头、请求体
请求头：
(1) Accpet： 告诉服务端，客户端接收什么类型的响应。
(2) Referfer：表示请求从哪个URL进来的。
(3) Cache-Control：对缓存进行控制，入一个请求希望响应的内容在客户端
缓存一年，可以通过这个请求头设置。
(4) Host：指定要请求的资源所在的主机和端口。
(5) User-Agent：告诉服务器，客户端使用的操作系统、浏览器的版本以及名称。

响应头：
(1) Cache-Control：响应输出到客户端后,服务端通过该属性告诉客户端该怎么
控制响应内容的缓存。
(2) ETag：表示你请求资源的版本,如果该资源发生啦变化,那么这个属性也会跟着变。
(3) Location：在重定向或创建新资源时使用。
(4) Set-Cookie：服务端可以设置客户端的Cookie

2. HTTP的响应码知道多少？

(1) 200：OK 表示请求成功
(2) 201：Created 请求成功并且服务器创建了新的资源
(3) 202：Accepted 服务器已接受请求，但尚未处理
(4) 301：Moved Permanently 永久重定向
(5) 302：Found 临时性重定向。
(6) 303：See Other 临时性重定向，且总是使用 GET 请求新的 URI。
(7) 304：资源并未修改，可以直接使用本地资源
(8) 401：Unauthorized 请求未授权
(9) 404：找不到与URL相匹配的资源（页面被删除或者其它）
(10) 500：服务端错误

3. GET和POST的区别？

4. HTTP缓存有几种？

  HTTP缓存分为两大类：强制缓存 和 协商缓存。
强制缓存：在缓存数据未失效的情况下，不需要再和服务器发生交互。
协商缓存：需要进行比较判断来决定是否使用缓存。

Vue押题

1. watch 和 computed 和 methods 区别是什么？

computed: 计算属性，基于它们的依赖进行缓存，只有在它的相关依赖发生改变时
才会重新求值。如果没有改变，多次访问计算属性会立即返回之前的计算结果，
不必再次执行该函数。

watch：监听器，数据需要随着其它数据变动而变动时

2. Vue 有哪些生命周期钩子函数？分别有什么用？

3. Vue 如何实现组件间通信？

4. Vue 数据响应式怎么做到的？

5. Vuex 你怎么用的？

state:
getter:
mutation:
action:

6. VueRouter 你怎么用的？

7. 路由守卫是什么？

8. Vue.set 是做什么用的？

9. Axios和普通的Ajax的区别是什么？

AJAX： 与服务端交换数据，进行交互，发送请求和拦截响应。

axios: 是一种基于Promise封装的HTTP客户端，Axios实现了对Ajax的封装。

10. Vue数据双向绑定的原理

Vue内部通过Object.defineProperty方法属性拦截的方式，把data对
象里每一个数据的读写转化成getter/setter，当数据变化时通知视图更新。

11. Vue的data要用函数的原因

在创建或注册模板的时候，传入一个data属性作为用来绑定的数据，
但是在组件中，data必须是一个函数，而不能直接赋值一个对象。

因为使用对象的话，每个组件上的data是互相影响的，对象是对于内存地址的引用，直接定义对象的话组件之间都会访问到这个对象。

12. ES6和CSS3的新特性

border-shadow:
box-shadow: 
border-radius:
animations:
flex布局：
媒体查询：

let和const关键字：let定义块作用域变量，const定义常量
字符串模板： `${}`
箭头函数：没有this这个属性
Promise：
解构赋值：

13. 事件委托

14. 单例模式

15. 动态REM

REM是根据根元素的font-size
不同浏览器的根元素的默认字体大小不一样，所以要动态设定。

16. Vuex的用法

作用：用于管理数据，共享状态，在各个组件之间管理外部状态
步骤：
1. 引入vuex，并通过use方法使用它。
2. 创建状态仓库。
3. 通过this.$store.state.xxx直接拿到需要的数据。

17. 如何手写Promise