1.1rem、1em、1px、1vh各自代表的含义？
- rem 相对于根元素
- em 相对于父元素字体大小
- vh 相当于屏幕宽度和高度的1%
- px 相对长度单位。像素px是相对于显示器屏幕分辨率而言的
2.display:none和visibility:hidden的区别？
- display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
- 使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
3.用原生js写出一段代码，实现一个按钮绑定两个onClick事件？
var btn = document.getElementById('btn')
btn.addEventListener('click', fn1)
btn.addEventListener('click', fn2)
function fn1 () {
console.log('我是方法1')
}
function fn2 () {
console.log('我是方法2')
}
4.用原生js写出一段代码，实现数组去重？
function unique1(array){
var n=[];//一个新的临时数组
for(var i=0;i<array.length;i++){
//如果当前数组的第i调已经保存进入临时数组，那么跳过
//否则把当前项push到临时数组里面
if(n.indexOf(array[i])==-1){
n.push(array[i]);
}
}
return n;
}
//速度最快，占用空间最多（空间换时间）
function unique2(array){
var n = {}, r = [], len = array.length, val, type;
for(var i = 0; i < array.length; i++){
val = array[i];
type = typeof val;
if (!n[val]){
n[val] = [type];
r.push(val);
}else if (n[val].indexOf(type) < 0){
n[val].push(type);
r.push(val);
}
}
return r;
}
function unique3(array){
var n = [array[0]]; //结果数组
for(var i = 1; i < array.length; i++){
//如果当前数组的第i项在当前数组中第一次出现的位置不是i,
//那么表示第i项是重复的，忽略掉。否则结果存入结果数组
if(array.indexOf(array[i]) == i){
n.push(array[i]);
}
}
return n;
}
5.GET与POST的区别，何时使用POST?
区别：
- get是从服务器上获取数据，post是向服务器传送数据。
- get是将参数数据加到URL中，用户可以看到。post是将内容放置在http请求信息体内传送，用户看不到这个过程。
- 对于get方法，服务器端是用Request.QueryString获取变量的值，对于post方法，服务器端用Request.Form获取提交的数据。
- get传送的数据量较小，不能大于2kb。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80kb，IIS5中为100kb。
- get安全性非常低，post安全性较高。但是执行效率却比post方法好。 何时使用POST：
- 无法使用缓存文件
- 向服务器发送大量数据
- 发送包含未知字符的用户输入时，post比get更稳定也更可靠
6.你所知道的http的响应码以及含义？
1xx(临时响应)
- 100: 请求者应当继续提出请求。
- 101(切换协议) 请求者已要求服务器切换协议，服务器已确认并准备进行切换。
2xx(成功)
- 200：正确的请求返回正确的结果
- 201：表示资源被正确的创建。比如说，我们 POST 用户名、密码正确创建了一个用户就可以返回 201。
- 202：请求是正确的，但是结果正在处理中，这时候客户端可以通过轮询等机制继续请求。
3xx(已重定向)
- 300：请求成功，但结果有多种选择。
- 301：请求成功，但是资源被永久转移。
- 303：使用 GET 来访问新的地址来获取资源。
- 304：请求的资源并没有被修改过
4xx(请求错误)
- 400：请求出现错误，比如请求头不对等。
- 401：没有提供认证信息。请求的时候没有带上 Token 等。
- 402：为以后需要所保留的状态码。
- 403：请求的资源不允许访问。就是说没有权限。
- 404：请求的内容不存在。
5xx(服务器错误)
- 500：服务器错误。
- 501：请求还没有被实现。
7.说一下宏任务和微任务？
- 宏任务：当前调用栈中执行的代码成为宏任务。
宏任务：
I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame - 微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件
微任务：
process、nextTick、Mutation、Observer、Promise.then、catch、finally
8.子组件通过父组件传递参数？
this.$emit('childFn', this.message);
9.v-if与v-show指令有哪些相同点和不同点?
相同点：
- v-show和v-if都能控制元素的显示和隐藏。 不同点：
- v-show本质就是通过设置css中的display设置为none，控制隐藏;v-if是动态的向DOM树内添加或者删除DOM元素
- v-show都会编译，初始值为false，只是将display设为none，但它也编译了;v-if初始值为false，就不会编译了
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一 使用场景：
- 频繁切换某节点时，使用v-show(无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大)
- 如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）
10.父组件向子组件传递数据？
props
11.v-model的使用？
<input type="text" v-model="msg">
12.$nextTick的使用？
- this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
13.computed与watch的区别？
14.职业规划？
15.css 水平、垂直居中的方法，至少写3种？
方法一
div{
width: 300px;
height: 300px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
方法二
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/
margin-left: -240px; /*width的一半*/
}
方法三
div{
width: 260px;
height: 230px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}
16.用js的递归的方法计算1-100求和？
方法一
function add(num, start) {
num += start
start++;
if (start > 100) {
console.log(num);
return num
}
else {
add(num, start)
}
}
add(0, 1);
方法二
function add(n) {
if(n == 1) return 1;
return add(n-1) + n
}
let total = add(100)
17.说一下闭包？
- 就是在函数里面声明函数，实际开发中主要应用于封装变量，保护变量不受外界污染，也相当于是在函数作用域里面再声明一个内部作用域，这样执行结果拿到的变量都是不同的，拿的就不是全局变量
18.说一下常用的es6的功能？
19.vue.js的优点？
- 轻量级的框架
- 双向数据绑定
- 指令
- 插件化
20.请列举至少5种可以从Dom获取元素的方法？
- 通过ID获取（getElementById）
- 通过name属性（getElementsByName）
- 通过标签名（getElementsByTagName）
- 通过类名（getElementsByClassName）
- 获取html的方法（document.documentElement）
- 获取body的方法（document.body）
- 通过选择器获取一个元素（querySelector）
- 通过选择器获取一组元素（querySelectorAll）
