2020年前端笔试题图片---题目和答案
笔试题目：
这个面试官好吓人。显示笔试题做30分钟。然后拿着一大本面试题。照着答案抽问我。懵逼。还是一家外包公司
==============
我的参考答案：
1. 题目可能有误。应该是两个div，一个是bigbox，一个是smallbox，图中多了些莫名其妙的东西。
.bigbox{
position: relative;
}
.smallbox{
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
overflow:auto
}
2. 清除浮动方法 在浮动元素后使用一个空元素如 <div class="clear"></div> ，并在CSS中赋予 .clear{clear:both;} 属性即可清理浮动。
3. 宽高都是142
4. 选择器类型：①通用元素选择器 ②类型选择器 ③class选择器④id选择器
可以继承的属性（随便写四个，不要写太全了）：1、字体系列属性 2、文本系列属性 3、元素可见性：visibility 4、表格布局属性：caption-side 5、列表属性：list-style-type 6、设置嵌套引用的引号类型：quotes
优先级： 下面列表中，选择器类型的优先级是递增的：类型选择器< class选择器< id选择器 给元素添加的内联样式 (例如，style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。 当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明
5. 常用的有Sass、Less 和 Stylus 这三种 css 预处理器。使用的好处：弥补了直接写 css 的一些缺憾：
语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
6. 实现响应式布局有以下几种方法：
1. 媒体查询
CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
2.百分比布局
通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。
3.rem布局
REM是CSS3新增的单位，并且移动端的支持度很高，
7. 相同点：都是存储数据，存储在web端，并且都是同源
不同点：
（1）cookie 只有4K 小 并且每一次请求都会带上cookie 体验不好，浪费带宽
（2）session和local直接存储在本地，请求不会携带，并且容量比cookie要大的多
（3）session 是临时会话，当窗口被关闭的时候就清除掉 ，而 local永久存在，cookie有过期时间
（4）cookie 和local都可以支持多窗口共享，而session不支持多窗口共享 但是都支持a链接跳转的新窗口
8. 基本类型：String、Number、Boolean、Symbol、Undefined、Null
判断类型的5种方法：
1.使用typeof
2.使用instanceof
3.使用constructor：undefined和null没有contructor属性
4.使用Object.prototype.toString.call
5.使用jquery中的$.type
9. JavaScript实现继承的方式：
类式继承
构造函数继承
组合继承
寄生组合式继承
extends继承
10. 1、语法更加简洁、清晰
2、箭头函数不会创建自己的this
3、箭头函数继承而来的this指向永远不变
4、.call()/.apply()/.bind()无法改变箭头函数中this的指向
5、箭头函数不能作为构造函数使用
6、箭头函数没有自己的arguments
7、箭头函数没有原型prototype
8、箭头函数不能用作Generator函数，不能使用yeild关键字
11. 利用filter去重
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
12 第一个： 01234
第二个：12435
笔试后问到的技术问题：
1.vuejs的生命周期？
什么是 vue 生命周期？有什么作用？
答：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。
请详细说下你对vue生命周期的理解？
答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在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结构依然存在。
2.vuejs的传值有哪些方式？
3.vuejs的监听和计算属性介绍一下？
分别简述computed和watch的使用场景
答：computed:
当一个属性受多个属性影响的时候就需要用到computed
最典型的栗子： 购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就需要用watch
栗子：搜索数据
4.项目怎么优化的？
你如何优化自己的代码？
代码重用
避免全局变量（命名空间，封闭空间，模块化mvc..）
拆分函数避免函数过于臃肿
注释
5.js的基本数据类型和引用数据类型。及区别？
6.vuejs的路由传参方式？
7.同步和异步有什么区别？
8.