目录
1.简述盒模型？
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容content。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
2.说说BFC？
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
BFC应用
防止margin重叠
清除内部浮动
自适应两（多）栏布局
防止字体环绕
触发BFC条件
根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute、fixedBFC的特性
内部的Box会在垂直方向上一个接一个的放置。
垂直方向上的距离由margin决定
bfc的区域不会与float的元素区域重叠。
计算bfc的高度时，浮动元素也参与计算
bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
3.块级元素有哪些，行内元素有哪些？
行内元素有：
b,big,i,small,tt
abbr,acronym,cite,code,dfn,em,kbd
strong,samp,var
a,bdo,br,img,map,object,q
script,span,sub,sup
button,input
label,select,textarea块级元素有：
address、article、aside、audio、blockquote、canvas、
dd、div、dl、fieldset、figcaption、figure、
footer、form、h1、header、hgroup、hr、noscript、
ol output p pre section table tfoot
ul video 4.display的指向说明，有什么作用？
css里的display属性的作用是规定元素应该生成的框的类型。display属性是前端开发中常用的一个属性，常用的属性值有block、none、inline、inline-block。
block： 将元素将显示为块级元素，元素前后会带有换行符，通常用于将行内元素转换为块级元素时使用。
display:none这个值表示元素不被显示。当你想要某个元素隐藏时，就可以给某个元素设置这个属性，它就会消失在网页中，但元素并没有在文档中删除，只是隐藏在网页结构中，不在网页中显示而已。但如果你想要元素显示的话，可以给元素设置display:block，元素就可以显示在网页中了。
display:inline 的作用可以将一个块级元素转换成行内元素，那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。这个块级元素实际的宽度和高度都是auto，并不是我们设定的值。
display:inline-block我们可以得到它是结合了inline和block并保留了它们的特性。所以设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。
5.数据类型
1基本数据类型:
string,number,Boolean,null,undefined;2引用数据类型object(Object,Array),function
3 ES6新增 symbol
6.this指向？
普通函数调用指向全局window
对象函数调用 谁调用this指向谁
构造函数调用 this指向实例对象
箭头函数本身没有this指向，继承父级
7.null和undefined区别
Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。用法：
变量被声明了，但没有赋值时，就等于undefined。
调用函数时，应该提供的参数没有提供，该参数等于undefined。
对象没有赋值的属性，该属性的值为undefined。
函数没有返回值时，默认返回undefined。
Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。用法
作为函数的参数，表示该函数的参数不是对象。
作为对象原型链的终点。
8.cookie,sessionStorage和localStorage区别
cookie用来保存登录信息，大小限制为4KB左右
localStorage是Html5新增的，用于本地数据存储，保存的数据没有过期时间，一般浏览器大小限制在5MB
sessionStorage接口方法和localStorage类似，但保存的数据的只会在当前会话中保存下来，页面关闭后会被清空。
| 名称 |
生命期 |
大小 |
与服务器通信 |
| cookie |
一般由服务器生成，可设置失效时间。 如果在浏览器端生成Cookie， 默认是关闭浏览器后失效 |
4KB |
每次都会携带在HTTP头中， 如果使用cookie保存过多数据会带来性能问题 |
| localStorage |
除非被清除， 否则永久保存 |
5MB |
仅在浏览器中保存，不与服务器通信 |
| sessionStorage |
仅在当前会话下有效， 关闭页面或浏览器后被清除 |
5MB |
仅在浏览器中保存，不与服务器通信 |
9.三等号和双等号区别？
区别:“==”表示相等,“====”表示严格相等。“==”运算符会在进行相等比较之前先进行必要值的类型转换;而“===”运算符不会执行类型转换,因此如果两个值类型不同,那么比较时,直接返回false。”
10.数组原生方法？哪些不会改变原数组？
改变原数组的方法
- splice() 添加/删除数组元素
语法：arrayObject.splice(index,howmany,item1,.....,itemX)
参数:
1.index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
2.howmany：可选。要删除的项目数量。如果设置为 0，则不会删除项目。
3.item1, ..., itemX：可选。向数组添加的新项目。
返回值: 如果有元素被删除,返回包含被删除项目的新数组。
- sort() 数组排序
语法：arrayObject.sort(sortby)
参数:
1.sortby 可选。规定排序顺序。必须是函数。。
返回值: 返回包排序后的新数组。
- pop() 删除一个数组中的最后的一个元素
语法：arrayObject.pop()
参数:无
返回值: 返回被删除的元素。
- shift() 删除数组的第一个元素
语法：arrayObject.shift()
参数:无
返回值: 返回被删除的元素。
- push() 向数组的末尾添加元素
语法：arrayObject.push(newelement1,newelement2,....,newelementX)
参数:
1.newelement1 必需。要添加到数组的第一个元素。
2.newelement2 可选。要添加到数组的第二个元素。
3.newelementX 可选。可添加若干个元素。
返回值: 返回被删除的元素。
- unshift() 向数组的开头添加一个或更多元素
语法：arrayObject.unshift(newelement1,newelement2,....,newelementX)
参数:
1.newelement1 必需。要添加到数组的第一个元素。
2.newelement2 可选。要添加到数组的第二个元素。
3.newelementX 可选。可添加若干个元素。
返回值: arrayObject 的新长度。。
- reverse() 颠倒数组中元素的顺序
语法：arrayObject.reverse()
参数:无
返回值: 颠倒后的新数组。
- copyWithin() 指定位置的成员复制到其他位置
语法：array.copyWithin(target, start = 0, end = this.length)
参数:
1.target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
2.start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
3.end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
返回值: 返回当前数组。
- fill() 填充数组
语法：array.fill(value, start, end)
参数:
1.value 必需。填充的值。
2.start 可选。开始填充位置。
3.end 可选。停止填充位置 (默认为 array.length)
返回值: 返回当前数组。
不改变原数组的方法
- slice() 浅拷贝数组的元素
语法：array.slice(begin, end);
参数:
1.begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。
2.end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)。
返回值: 返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。
- join() 数组转字符串
语法：array.join(str)
参数:
1.str(可选): 指定要使用的分隔符，默认使用逗号作为分隔符。
返回值: 返回生成的字符串。
- concat() 合并两个或多个数组
语法：var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)
参数:
1.arrayX（必须）：该参数可以是具体的值，也可以是数组对象。可以是任意多个。
返回值: 返回返回合并后的新数组。
- indexOf() 查找数组是否存在某个元素
语法：array.indexOf(searchElement,fromIndex)
参数:
1.searchElement(必须):被查找的元素
2.fromIndex(可选):开始查找的位置(不能大于等于数组的长度，返回-1)，接受负值，默认值为0。
返回值: 返回下标
- lastIndexOf() 查找指定元素在数组中的最后一个位置
语法：arr.lastIndexOf(searchElement,fromIndex)
参数:
1.searchElement(必须): 被查找的元素
2.fromIndex(可选): 逆向查找开始位置，默认值数组的长度-1，即查找整个数组。
返回值: 方法返回指定元素,在数组中的最后一个的索引，如果不存在则返回 -1。（从数组后面往前查找）
- includes() 查找数组是否包含某个元素
语法：array.includes(searchElement,fromIndex=0)
参数:
1.searchElement(必须):被查找的元素
2.fromIndex(可选):默认值为0，参数表示搜索的起始位置，接受负值。正值超过数组长度，数组不会被搜索，返回false。负值绝对值超过长数组度，重置从0开始搜索。
返回值: 返回布尔
11.for in和for of区别？
- for-of 无法遍历 不可迭代对象
可迭代对象包括: Array，Map，Set，String，TypedArray，arguments等等
- for-of 遍历的是值，for-in遍历的是key
12.原型链重点是什么如何打印？
我们已经假设Object.prototype是终点了，所以看起来不能是情况1。另外，抛出异常也不是好的设计，所以也不是情况3。那么情况2呢，它不存在原型属性，返回undefined怎么样？也不好，因为返回undefined一种解释是原型不存在，但是也相当于原型就是undefined。这样，在原型链上就会存在一个非对象的值。
所以，最佳选择就是null。一方面，你没法访问null的属性，所以起到了终止原型链的作用；另一方面，null在某种意义上也是一种对象，即空对象，因为null一开始就是为表示一个“空”的对象存在的。这样一来，就不会违反“原型链上只能有对象”的约定。
所以，“原型链的终点是null”虽然不是必须不可的，但是却是最合理的。
13.vue优点？
一、vue作为一款轻量级框架，门槛低，上手快，简单易学。
二、vue可以进行组件化开发，数据与结构相分离，使代码量减少，从而提升开发效率，易于理解
三、vue最突出的优势在于对数据进行双向绑定，使用虚拟DOM
四、相较于传统页面通过超链接实现页面跳转，vue会使用路由跳转不会刷新页面
五、vue是单页面应用，页面局部刷新，不用每次跳转都请求数据，加快了访问速度，提升了用户体验
14.vue生命周期函数
| beforeCreate |
组件实例被创建之初，组件的属性生效之前 |
| created |
组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用 |
| beforeMount |
在挂载开始之前被调用：相关的 render 函数首次被调用 |
| mounted |
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子 |
| beforeUpdate |
组件数据更新之前调用，发生在虚拟 DOM 打补丁之前 |
| update |
组件数据更新之后 |
| activated |
keep-alive 专属，组件被激活时调用 |
| deactivated |
keep-alive 专属，组件被销毁时调用 |
| beforeDestory |
组件销毁前调用 |
| destoryed |
组件销毁后调用 |
15.组件data为什么返回函数
组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data。如果单纯的写成对象形式，就使得所有组件实例共用了一份data，造成了数据污染。
- 组件传值有哪些？
使用 props 和 emit，进行父子组件的通信
使用 event-bus 事件总线，进行任意组件的通信
使用 Vuex 共享数据，进行任意组件的通信
使用 $attrs / $listeners，实现父组件传递数据给子/孙组件
使用 provide / inject
- vuex有哪些属性？
vuex是一个能方便vue实例及其组件传输数据的插件 方便传输数据，作为公共存储数据的一个库
state: 状态中心
getters: 获取状态
mutations: 更改状态，同步的
actions: 异步更改状态
modules: 将state分成多个modules，便于管理
应用场景：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车。
18.vuex和localstorage区别？
1.实质区别
vuex存的是状态，存储在内存；localStorage是浏览器提供的接口，让你存的是接口，以文件的形式存储到本地
2.应用场景
vuex用于组件之间的传值，localStorage则主要用于页面之间的传值
3.永久性
当刷新页面时，vuex存储的值会丢失，localStorage不会
总结
localStorage可以代替vuex，对于不变的数据确实可以，但是当两个组件共同用以数据源，如果其中一个组件中的数据源改变，希望另一个组件响应变化，这时候就要选择用vuex。vuex是vue的状态管理机制，是方便组件之间通信的。一个组件的数据变化是会映射到使用这个数据的其他组件。而localStorage是本地存储，是将数据存储到浏览器的方法，一般在跨页面时使用。
19.vue中SSR是什么？（重点）
服务器渲染
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。
然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。
20.vue中key作用？
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。