CSS

问：display,position,float 的关系

当元素是 display:none 的时候 position 和 float 失效
当元素是 position 的值是 absolute 或 fixed 时，float失效，display 会被按规则重置。
当 float 的值不是 none，该框浮动并且 display 会被按照转换对应表设置。

问：移动端1px问题

设备像素比dpr = 物理像素/设备独立像素

比如，iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素。而其dpr为2。

而 border-width: 1px; 描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。

UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素。

JS

问：reduce

问：axios和fetch的区别

axios

从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）
拦截请求和响应
自动转换JSON数据

fetch

优点：

符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
更好更方便的写法
更加底层，提供的API丰富（request, response）
脱离了XHR，是ES规范里新的实现方式

缺点：

fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
fetch默认不会带cookie，需要添加配置项
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
fetch没有办法原生监测请求的进度，而XHR可以

总结

发送数据时，fetch()使用body属性，而Axios使用data属性
fetch()中的数据是字符串化的，JSON.stringify()
URL作为参数传递给fetch()。但是在Axios中，URL是在options对象中设置的

问：map和forEach的区别

map：使用场景不希望改变原数组，创建一个新数组

有返回值，可以return出去，而是新建一个数组出去

var ary = [12,23,24,42,1];  
var res = ary.map((item,index,arr) => {  
    return arr[index] = item*10;  
})
console.log(res);// [ 120, 230, 240, 420, 10 ]
console.log(ary);// [ 120, 230, 240, 420, 10 ]

forEach：使用场景对原数组进行操作

没有返回值

var ary = [12,23,24,42,1];  
var res = ary.forEach((item,index,arr) => {  
    arr[index] = item*10;  
}) 
console.log(res);//-->undefined;  
console.log(ary);//-->会对原来的数组产生改变；

是否改变原数组取决于数据类型，基本数据类型都不会改变，引用类型都会改变

问：map和set的区别

VUE

问：params和query的区别

用法：query 要用 path 来引入，params 要用 name 来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

url地址显示：query 更加类似于我们ajax中 get 传参，params 则类似于 post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示。

注意点：query 刷新不会丢失 query里面的数据，params 刷新会丢失 params里面的数据。

问：请详细说下你对vue生命周期的理解？

创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

问：vuex有哪几种属性？

State => 基本数据(数据源存放地)
Getters => 从基本数据派生出来的数据
Mutations => 提交更改数据的方法，同步！
Actions => 像一个装饰器，包裹mutations，使之可以异步。
Modules => 模块化Vuex

问：Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

问：模板解析的事件指令解析过程？

从指令名中取出事件名。如：v-bind:click 的 click
根据指令的值（表达式）从methods里得到对应的事件处理函数对象。如：clickThisBtn
给当前元素节点绑定指定事件名和回调函数,用DOM事件监听
解析指令完成后，移除次指令属性

问：Dep的实例是什么时候创建？创建多少个？Dep的结构是？

初始化给data属性进行数据劫持时创建的

个数：与data中的属性一一对应

Dep{id: 0,subs: Array(0)} id是标识，subs是相关的n个watcher对象的容器

问：Watcher的实例是什么时候创建？创建多少个？watcher的结构是？

初始化的解析大括号表达式/一般指令时创建

个数：与模板中表达式（不包含事件指令）一一对应

this.cb = cb; // 更新界面的回调
this.vm = vm; // vm
this.exp = exp; // 对应的表达式
this.depIds = {}; // 相关的n个dep的容器对象
this.value = this.get(); // 当前表达式对应的value

问：Dep与Watcher之间的关系？如何建立的？

多对多的关系：
1个data属性 ---> 1个Dep ---> n个watcher（模板有多个表达式使用此属性：{{a}}和 v-text="a"）
1个表达式 ---> 1个watcher ---> n个Dep（多层表达式：a.b.c）

如何建立的：
data中属性的get()中建立
什么时候建立：
初始化解析模板中的表达式创建watcher对象

网络相关

WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。允许服务端主动向客户端推送数据。

浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

自己曾经不会的题（仅供个人复习）

CSS