面试问题总结
1、响应式布局
详情参考手把手教你响应式布局（一）
一、相对长度单位。 其长度单位会随着它的参考值的变化而变化。
- px,像素
- em,元素的字体高度
- %,百分比
- rem,根元素的font-size
- vm,视窗宽度，1vw=视窗宽度的1%
- vh,视窗高度，1vh=视窗高度的1%
二、如何实现移动端字体大小屏幕自适应，百分比方法的缺点，rem的作用
（1）用媒体查询+rem
@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {
//针对iPhone 4, 5c,5s, 所有iPhone6的放大模式，个别iPhone6的标准模式
html{font-size:10px;}
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {
//针对大多数iPhone6的标准模式
html{font-size:12px;}
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {
//针对所有iPhone6+的放大模式
html{font-size:16px;}
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {
//针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理
html{<font-size:20px;}
}
（2）js+rem
按照设计稿的宽去设置一个合适的rem ,配合js查询屏幕大小来改变html的font-size，从而达到适配各种屏幕的效果
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;<br>window.innerWidth>max ? window.innerWidth : max;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
//这个方法就是在监听屏幕的宽度，然后根据不同的屏幕做出反应
//orientationchange :检测屏幕发生反转时，就是是横屏还是竖屏时
//clientWidth :就是设备的宽度
//docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 核心就是这句设置根元素的字体大小是clientWidth/320*20
//document.documentElement.clientWidth 屏幕宽度
（3）CSS3的计算calc和vw单位
calc()的运算规则
使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
VW：相对于视口的宽度。视口被均分为100单位的vw，也就是说在375宽度的屏幕中，1vw等于3.75px，320的屏幕中，1vw等于3.2px。这样的话对于不同尺寸的屏幕有了一个统一的单位来进行衡量，这时我们再结合rem，即对HTML设置字体大小font-size：calc(100vw/18.75)——这是以iPhone6的尺寸为设计图时做的计算，此时在iPhone6尺寸的页面中1rem为20px；
2、两栏布局，一侧固定一侧自适应的几种方式
3、h5废弃的标签和属性及新增的标签和属性
4、浏览器的内核有哪些
1、IE浏览器内核：Trident内核，也被称为IE内核；
2、Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核；
3、Firefox浏览器内核：Gecko内核，也被称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核；
5.session.storage,local.storage,cookie的区别
都是用来数据储存的，cookie只能储存好像4K左右的数据，可以设置数据的过期时间，并且每次发送请求的时候都会将数据提供给后台。session和local都可以储存5M的数据，session.storage主要是可以保存在浏览器中实现多个页面互相访问的数据，但是一旦浏览器关闭数据就会被销毁。local.storage可以永久的保存在浏览器上，浏览器关闭后也可以存在，只要不手动删除就会一直在。一般存储都是存用户登录时候的数据，比如头像、用户名还有token这些，用户要退出登录的话就用clear清空数据缓存就好了
6.VUE数据双向绑定原理
vue数据双向绑定原理简单来说就是数据劫持，按照我的理解就是我看着你，你变了，我也跟着变。具体实现的话是es6提供了Object.defineProperty()这个属性来实现数据劫持的，这个属性中有两个方法，一个是get一个是set，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。发布者订阅者模式大概就是一个监听器Observer是用来监听所有的属性，当数据有变动的话就通知给订阅者，然后订阅者Watcher收到通知后执行相应的函数从而更新视图，解析器Compile进行编译解析初始化视图，并绑定更新函数给订阅者
7、工作中的增删改查是哪些方法
8、Vue的生命周期有哪些，页面挂载之前beforecreated到mounted使用的区别
beforeCreate（创建前）,created（创建后）,
beforeMount(载入前),mounted（载入后）,
beforeUpdate（更新前）,updated（更新后）,
beforeDestroy（销毁前）,destroyed（销毁后）
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？
destroyed ：当前组件已被删除，清空相关内容
一共有十个，分为5组。分别是beforecreated、created、beforemounted、mounted、beforeupdate、updated、beforedestory、destoryed、deactivated、activated。用的多的就是created和mounted，created 在 DOM 元素渲染之前，而 mounted 是渲染节点之后，通常是在 created 中发送 网路请求获得数据， mounted 中其实也可以发送网路请求，但是会晚一点，比如使用 echart 图表，富文本编辑器区域滚动条这些需要动态插入元素的就需要在 mounted 中使用了。activated,deactivated 这两个生命周期必须配 合 keep-alive 一起使用，不然无效，可以实现数据缓存效果。
9、你做过哪些性能优化
10、截取字符串的方法有哪些？参数的区别？
slice(start,[end])
第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个参数等于大于第二个参数,则返回空字符串...
substring(start,[end])
第一个参数代表开始位置,第二个参数代表结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值作为开始位置,截取出来的字符串的长度为较大值与较小值之间的差.
substr(start,[length])
第一个参数代表开始位置,第二个参数代表截取的长度
函数：split()
功能：使用一个指定的分隔符把一个字符串分割存储到数组
例子：
str=”jpg|bmp|gif|ico|png”;
arr=theString.split(”|”);
//arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组
函数：John()
功能：使用您选择的分隔符将一个数组合并为一个字符串
例子：
var delimitedString=myArray.join(delimiter);
var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”);
var portableList=myList.join(”|”);
//结果是jpg|bmp|gif|ico|png
function func(s, n) {
return s.slice(0, n).replace(/([^x00-xff])/g, “$1a”).slice(0, n).replace(/([^x00-xff])a/g, “$1″);
}
11、改变this指向的方法有哪些？call和apply的区别
call方法:
语法：call(thisObj，Object) //对象，参数集
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
apply方法：
语法：apply(thisObj，[argArray]) //对象，数组
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.
$.proxy(fn,context)改变this的指向 fn必须是一个函数
ES5还定义了一个方法：bind()
js改变this指向方法call,apply;jq改变this指向方法$.proxy()
12、知道哪些ES6语法，解构赋值数组和对象的区别？
数组以序列号一一对应，这是一个有序的对应关系。
而对象根据属性名一一对应，这是一个无序的对应关系，属性名一致即可。根据这个特性，使用解析结构从对象中获取属性值更加具有可用性。
13、你对jQuery优化有哪些建议？
1、总是使用#id去寻找element. 在Classes前面使用Tags
2、缓存jQuery对象，可以用逗号隔开一次定义多个本地变量，这样可以节省一些字节。
3、更好的利用链
4、事件委托（又名：冒泡事件）
5、遵从$(windows).load
14、AMD和CMD
AMD： 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。
requireJS主要解决两个问题
1、多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
2、js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长
require([dependencies], function(){});
require()函数接受两个参数
第一个参数是一个数组，表示所依赖的模块
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
CMD： 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同
15、如何创建一个对象，划出内存图
一、原始方法
通过new关键字生成一个对象，然后根据JavaScript是动态语言的特性来添加属性和方法，构造一个对象。其中的this表示调用该方法的对象。
二：工厂方法（构造函数）
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.showName = function () {
console.log(this.name);
};
this.showAge = function () {
console.log(this.age);
};
}
var obj1 = new Person("Kitty","21");
var obj2 = new Person("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>
工厂方法为每个对象都创建逻辑相同的方法，很浪费内存。
三：混合的构造函数/原型方式
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.array = new Array("Kitty","luo");
}
Person.prototype.showName = function (){
console.log(this.name);
};
Person.prototype.showArray = function (){
console.log(this.array);
};
var obj1 = new Person("Kitty",21);
var obj2 = new Person("luo",22);
obj1.array.push("Wendy");//向obj1的array属性添加一个元素
obj1.showArray();//Kitty,luo,Wendy
obj1.showName();//Kitty
obj2.showArray();//Kitty,luo
obj2.showName();//luo
</script>
四：动态原型方法
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.array = new Array("Kitty","luo");
//如果Person对象中_initialized 为undefined，表明还没有为Person的原型添加方法
if(typeof Person._initialized == "undefined"){
Person.prototype.showName = function () {
console.log(this.name);
};
Person.prototype.showArray = function () {
console.log(this.array);
};
Person._initialized = true;
}
}
var obj1 = new Person("Kitty",21);
var obj2 = new Person("luo",22);
obj1.array.push("Wendy");//向obj1的array属性添加一个元素
obj1.showArray();//Kitty,luo,Wendy
obj1.showName();//Kitty
obj2.showArray();//Kitty,luo
obj2.showName();//luo
</script>
参考：JavaScript如何创建一个对象
16、new具体做了哪些事情
var fn = function () { };
var fnObj = new fn();
（1）创建一个空对象
var obj = newobject();
（2）设置原型链
obj._proto_ = fn.prototype;
（3）让fn的this指向obj，并执行fn的函数体（调用函数）
var result = fn.call(obj);
（4）判断fn的返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。null比较特殊，返回obj。（如果构造函数没有返回值，隐式返回this对象）
if (typeof(result) == "object"){
fnObj = result;
} else {
fnObj = obj;
}
new 操作符具体干了什么？
- 创建一个新的对象
- 将构造函数的作用域赋值给新对象（this执行新的对象）
- 执行构造函数的代码
- 返回新的对象
17、CSS3有哪些新特性，如何兼容CSS3和H5新标签？
CSS3新特性：
border-radius
box-shadow
border-image
text-overflow
@font-face 规则
//2D转换
translate()
rotate()
scale()
skew()
matrix()
//3D转换
rotateX()
rotateY()
渐变：linear-gradient、radial-gradient
transition //过渡 @keyframes animation //动画
//多列
column-count //多少列
column-gap //列的间隙
//多列边框
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span //元素跨越多少列
column-width //列宽
box-sizing
Flex Box
@media CSS3 根据设置自适应显示
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
CSS3兼容写法： -webkit-, -ms- （IE）或 -moz- （FF），-o-
IE8浏览器中还没有添加对HTML5新标签的支持，所以在IE8中无法直接展现HTML5新标签中的内容。庆幸的是IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，代码如下：
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
浏览器支持新标签后，还需要添加标签默认的样式：
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}
18、doctype声明，严格模式和混合模式是什么，意义？
放在网页顶部的doctype声明是让浏览器进入正确呈现模式的关键。浏览器自动切换到恰当的呈现模式，以便正确显示由doctype声明所指定的文档种类。
doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。
19、浏览器常见兼容问题
1：不同浏览器的标签默认的外补丁和内补丁不同
- 解决方案：css里
*{margin:0;padding:0;}
2：图片默认有间距
- 解决方案：使用float属性为img布局
3：透明度的兼容css设置
最全整理浏览器兼容性问题与解决方案、常见的浏览器兼容性问题总结
20、定位有哪些
static：默认值，块级元素和行内元素按照各自的特性进行显示
relative:相对定位,元素相对于原本位置的定位，元素不脱离文档流，位置会被保留，其他的元素位置不会受到影响，不会改变元素的display属性
absolute：绝对定位，相对于static以外的第一个父元素进行定位，如何不存在这样的包含块则相对于body进行定位。脱离文档流，并改变了display属性，元素本身生成块级框（可以设置宽高，不设置宽度时宽高由内容撑开，不继承父级宽度，可以在一行显示，换行符不解析）
fixed:固定定位，相对于浏览器窗口进行定位。脱离文档流，并改变了display属性，元素本身生成块级框。
inherit:从父元素继承 position 属性的值。IE8以及以前的版本都不支持inherit属性。
sticky:粘性定位，它结合了结合了position:relative 和 position:fixed 两种定位功能于一体的特殊定位
21、如何实现div居中，如何让float元素居中
.center {
display: -webkit-flex;
-webkit-justify-content: center;
-webkit-align-items: center;
}
.center {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
//浮动元素居中
//子元素在父元素里面垂直居中
//父元素设置
｛
display:table-cell;
vertical-align:middle;
｝
//浮动元素既垂直又水平居中的方法
{
display:table-cell;
vertical-align:middle;
margin:0 auto;
}
DIV居中的几种方法
22、如何区分html和html5
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation支持HTML5新标签：
23、CSS选择器有哪些？它们的优先级顺序怎么样？CSS3增加了哪些伪类选择器？
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
CSS选择器优先级总结
24、对json的理解
JSON，是一种轻量级数据交换格式，是一种传递对象的语法，JSON能够做到字符串到对象之间的转换
JSON.stringify()方法用于将一个值转为字符串。该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原
默认情况下，JSON.stringify()输出的JSON字符串不包括任何空格字符或缩进
25、get和post的区别
get和post是HTTP与服务器交互的方式，get用于获取数据，post用于提交数据
GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
GET能被缓存，POST不能缓存 。
GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。
GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。
与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。
GET和POST还有一个重大区别，简单的说：
GET产生一个TCP数据包；POST产生两个TCP数据包。
长的说：
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
GET和POST两种基本请求方法的区别、get和post区别？
26、link与@import的区别
1.从属关系区别@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
就结论而言，强烈建议使用link标签，慎用@import方式。
28、如何封装ajax？参数是什么对象？
export const BASEURL = '/api/'
export function ajax(options){
let config = {
url:options.url,
method:options.method || 'get',
params:options.params || {},
data:options.data || {},
headers:options.headers || {}
}
axios.interceptors.response.use((response) => { //响应拦截器
if (response.data.errorCode === '401') {
router.push('/login')
message({
message:'会话失效，请重新登陆',
type:'error'
})
return response
} else {
return response
}
}, (error) => {
return Promise.reject(error)
})
return axios(config).catch((e) => {
if(!e.response){
router.push('/login')
message({
message:'会话失效，请重新登陆',
type:'error'
})
}else{
if(e.response.status === 504){
message({
message:"网关超时",
type:'error'
})
}else{
message({
message:e.response.data.msg,
type:'error'
})
}
}
})
}
29、事件委托的原理是什么？什么时候需要事件委托？
事件委托的原理是事件冒泡机制
当动态创建元素的时候，因为DOM不存在的时候无法添加事件，所以需要委托给父元素
30、懒加载多页面优化
31.MVVM思想
MVVM是一种框架思想，其实是借用了后端中的MVC框架思想，后端中的MVC其实就是指数据模型、视图和控制层，现在前后端分离， 前端更加的独立，从思想上来说拆分成多层更有利于项目结构的拆分和维护。model是指数据模型，view是指页面效果，而view-model其实就是视图模型，是用来进行逻辑处理和页面渲染的，可以简单的理解为vue对象，因为vue可以自己实现数据的双向绑定，不需要我们再去处理。所以MVVM框架思想还是很强大的。
32.keep-alive
Keep-alive 可以保存当前组件和页面的状态，还可以避免组件的反复创建和渲染，可以理解为实现组件和页面的缓存。可以提高性能，项目中可以在动态组件或者后台的多标签页 切换上添加该标签即可。 用起来比较简单，用该标签包裹动态组件或者 router-view 即可。 使用 keep-alive 会触发生命周期中的 actived 和 deactived，在组件显示时会触发 actived，不显示时会触发 deactived
33. 解释一下预解析
预解析就是提前解析，js 在执行代码前会将变量和函数的声明提前，如果写代码的时候 不注意规范很容易出错，所以我们写代码的时候遵循先声明在使用就可以避免出错，也可以 使用 es5 的新语法 let，也可以避免变量提升
34.解释一下闭包
提起闭包就要先说一下作用域，默认情况下，全局作用域大家都可以使用，但是局部作用域只能在当前范围内使用，但是有时候我们希望在函数外部访问到函数内部的局部作用域，这就是闭包。一般涉及到不同作用域之间的访问都算闭包，常见的有在函数内部 返回一个函数，将数据用该函数返回出来。比如遍历给 li 给每个 li 添加点击事件，然后在点 击事件中打印索引,这个时候显示的都是最后一个索引就可以用自调用函数实现闭包。
35.组件传值有哪些
1.父传子，子组件用 props 接收
2.子传父通常会在子组件定义一个点击事件用 $emit 传值
3.兄弟传值 eventBus
4.插槽传值(子传父)
5.v-model 可以实现实时父传子
6.v-model+watch+$emit 实现实时子传父
7.vuex 实现任意组件关系的传值
8.localstorage 也可以实现任意组件传值
9.原型挂载也可以实现任意组件传值
10.provide / inject
11、$attrs/$listeners
参考：https://www.cnblogs.com/fundebug/p/10884896.html
36. vuex，Vuex的运行流程？
Vuex 是 vue 中用来进行全局状态管理的，可以实现任意组件关系之间的数据读取操作，它有四个对象：state，getters，mutations 和 actions，state 类似于 vue 对象中的 data，用来定义变量，getters 类似于 vue 中的 computed 计算属性，mutations 是定义方法，整个 vuex 中只有 mutations 中可以修改数据，而获取数 据可以用 state 也可以用 getters，还有 actions 也是定义方法，但是跟 mutations 不一样的就 是它可以支持异步，如果我们的数据是后端提供过来的，需要缓存，我们可以在 actions 请 求数据，然后在 actions 中拿到数据调用 mutations，由 mutations 去存储数据。当然 mutations 的调用方法是使用 commit 调用， actions 的调用方法是用 dispatch 调用，也可以使用 map 的辅助函数，可以直接解构调用。
37. params与query的区别
- 传参可以使用params和query两种方式。
- 使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。
- 使用query传参使用path来引入路由。
- params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
- 二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。
参考：https://blog.csdn.net/mf_717714/article/details/81945218
38. Vue打包优化，Webpack打包优化
参考：https://www.jianshu.com/p/11c1d85ccd71
39. 数组常用的方法?forEach和map的区别
参考：https://blog.csdn.net/weixin_42246997/article/details/93514218
40. 为什么vuex中要通过mutations修改state，而不是直接修改state？mutation 中为什么 不能做异步操作？
因为state是实时更新的，mutations无法进行异步操作，而如果直接修改state的话是能够异步操作的，当你异步对state进行操作时，还没执行完，这时候如果state已经在其他地方被修改了，这样就会导致程序存在问题了。所以state要同步操作，通过mutations的方式限制了不允许异步。
Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
41. ES6有几种作用域？
参考：https://segmentfault.com/a/1190000021114868
42. Js的异步执行流程，事件循环（event loop）
参考：http://www.ruanyifeng.com/blog/2013/10/event_loop.html
https://www.jianshu.com/p/ab1a02e863be
43.一个页面从输入一个url到页面呈现经历了那些步骤？
- 首先，在浏览器地址栏中输入url
- 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
- 在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
- 浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
- 握手成功后，浏览器向服务器发送http请求，请求数据包。
- 服务器处理收到的请求，将数据返回至浏览器
- 浏览器收到HTTP响应
- 读取页面内容，浏览器渲染，解析html源码
- 生成Dom树、解析css样式、js交互
- 客户端和服务器交互
- ajax查询
浏览器渲染机制：
- 处理
HTML标签建立DOM树 - 处理
CSS标签建立CSSOM树 - 连接
CSSOM树和DOM树形成一个render树 - 在
render树上运行布局来计算每个节点的形状 - 在屏幕上画每一个节点
44.electron的架构原理？
45.微信小程序的框架的结构，底层原理
