1.什么是mvvm、mvc模型？
mvc:model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又相互依赖关系。
mvvm:model-view-viewmodel（模型-视图-控制器）它是一种双向数据绑定的模式，用viewmodel来建立起model数据层和视图层的连接，数据改变会影响视图，视图改变会影响数据。
2.vue双向数据绑定的原理？
vue.js是数据劫持结合发布者-订阅者模式的方式，通过Object.definePropery()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
3.vue的生命周期是什么？
创建前/后：beforeCreate和created（data和method还没有初始化，初始化完成）
渲染前/后：beforeMount和mounted（编辑模板，渲染完成可以看到页面）
数据更新前/后：beforeUpdate和updated（将数据渲染到视图中）
销毁前/后：beforeDestory和destoryed（实例进行销毁，data和methods、指令都不可用）
4.vue中computed和watch的区别是什么？
computed计算属性就是为了简化template里面模板字符串的计算复杂度、防止模板太过厚重。它具有缓存特性。
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，一般用于监控路由、input输入框的值的特殊处理等等，它比较适合的场景是一个数据影响多个数据，它不具有缓存性。
watch:监测的是属性值，只有属性值发生变化，其都会触发执行回调函数来执行一系列操作。
computed:监测的是依赖值，依赖值不变的情况下其就会直接读取缓存进行复用，变化的情况下才会重新计算。
5.什么是vuex,谈谈你对它的理解？
首先vuex的出现是为了解决web组件化开发的过程中，各组件之间传值的复杂和混乱的问题
将我们在多个组件中需要共享的数据放到store中
要获取或格式化数据需要使用getters
改变store中的数据，使用mutation,但是只能包含同步的操作，在具体组件里面调用的方式this.$store.commit('xxx')
Action也是改变store中的数据，不过是提交的mutation,并且可以包含异步操作，在组件中的调用方式this.$store.dispatch('xxx')
在action里面使用的commit(调用mutation)
6.es6有哪些新特性？
ES6是2015年推出的一个新的版本、这个版本相对于ES5的语法做了很多的优化、例如：新增了let、const
let和const具有块级作用域，不存在变量提升的问题。新增了箭头函数，简化了定义函数的写法，同时可以巧用箭头函数的this（注意箭头函数本身没有this,它的this取决于外部环境）
新增了promise解决了回调地狱的问题
新增了模块化、利用import、export来实现导入、导出
新增了结构赋值，ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这称为解构
新增了class类的概念，它类似于对象
7.promise是什么？它有哪些作用？
Promise是异步编程的一种解决方案，简单说就是一个容器，里面保存着某个未来才执行的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，可以从改变对象获取异步操作的消息。
它可以解决回调地狱的问题，也就是异步深层嵌套的问题
.catch（）获取异常信息
.finally（）成功与否都会执行（不是正式标准）
Promise基本使用：我们使用new来构建一个Promise，Promise的构造函数接收一个参数，是函数，并且传入两个参数resolve、reject，分别代表异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
实现异步任务用setTimeout，Promise实例生成后，可以用then方法来接收数据。
8.v-if和v-show有什么区别？
v-if是"真正"的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，操作的实际上是dom元素的创建或销毁。
v-show就简单得多--不管初始化条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换，它操作的是display:none/block属性。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
9.Vue中key有什么作用？
key的作用主要是为了高效的更新虚拟DOM，如果没有唯一key，页面上删除一条标签，由于不知道是哪一条，所有要把全部的虚拟dom重新渲染，如果知道key为x标签被删除掉，只需要把渲染的dom为x的标签去掉即可。
10.vue和react区别？
模板的语法不同，React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染，但其实这只是表面现象，毕竟React并不必须依赖JSX。在深层上，模板的原理不同，这才是他们的本质区别：React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的，更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的。
11.水平垂直居中
方法一：position 定位（利用子绝父相对定位的方式来实现）
.parent{
500px;
height: 500px;
position：relative;
｝
.child{
100px;
height: 100px;
position：absolute;
top：50%;
left：50%;
margin-left：-50px
margin-top：-50px
｝
方法二：position + transform（利用css3的transform）
.parent{
position：relative;
｝
.child{
position：absolute;
top：50%;
left：50%;
transform: translate(-50%, -50%);
｝
方法三：flex 布局（子盒子有或没有宽高的时候都适用）
.parent {
display：flex;
algin-item：center; 垂直
justify-content：center; 水平
｝
12.数据类型的判断有哪些方法？他们的优缺点及区别是什么？
typeof（使用简单，只能检测出基本类型）
instanceof（能检测出引用类型，不能检测出基本类型）
constructor（基本能检测出所有类型，除了null和undefined）
Object.prototype.toSting.call（检测出所有类型）
13.盒子模型的理解？
在标准盒子模型中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width和height指的是内容区域+border+padding的宽度和高度。
14.js的执行机制是什么样的？
js是一个单线程、异步、非阻塞I/O模型、event loop事件循环的执行机制
所有任务可以分成两种，一种是同步任务，另一种是异步任务。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才执行后一个任务。异步任务指的是，不进入主线程、而进入"任务队列"的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
15.什么是深拷贝、什么是浅拷贝？
浅拷贝：创建一个新对象，这个对象对原始对象进行拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
深拷贝会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。
16.async await是什么？它有哪些作用？
async await是es7里面的新语法、它的作用就是async用于申明一个function是异步的，而await用于等待一个异步方法执行完成。它可以很好的替代promise中的then
async函数返回一个promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等异步操作完成，再接着执行函数内后面的语句。
17.什么是原型链？
每一个proto属性，指向的构造函数的原型对象，构造函数的原型
对象也是一个对象，也有proto属性，这样一层一层往上找的过程就形成了原型链
18.什么是闭包？闭包有哪些优点？
闭包指有权访问另一个函数作用域中变量的函数。简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。
作用：延长变量的作用域、在函数的外部可以访问函数内部的局部变量，容易造成内层泄漏，因为闭包中的局部变量永远不会被回收。
19.平时都是用哪些工具进行打包的？babel是什么？
WebPack是一个模块化打包工具，你可以使用WebPack管理你的模块依赖，并编译输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件，让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。
babel可以帮助我们转换一些当前浏览器不支持的语法，它会把这些语法转换为低版本的语法已便浏览识别。
20.常见的布局方式有哪些？他们的优缺点是什么？
页面布局常用的方法有浮动、定位、flex、grid网格布局、栅格系统布局
浮动
优点：兼容性好。 缺点：浮动会脱离标准文档流，因此要清除浮动。（overflow:hidden）
绝对定位
优点：快捷。 缺点：导致子元素也脱离了文档流，可实用性差。
flex布局（CSS3中出现的）
优点：解决了上面两个方法的不足，flex布局比较完美，移动端基本都flex布局。
网格布局（grid）
CSS3中引入的布局。代码简化了很多。
21.谈谈你平时都用了哪些方法进行性能优化？
减少http请求次数、打包压缩上线代码、使用懒加载、使用雪碧图、动态渲染组件、CND加载包
22.BFC是什么？
BFC（会计格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题。
BFC是值浏览器中创建一个独立的渲染区域，该区域所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用。
23.一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？
1.浏览器查找域名对应的IP地址（DNS查询：浏览器缓存->系统缓存->路由器缓存->ISP DNS缓存->根域名服务器）
2.浏览器向web服务器发送一个HTTP请求（TCP三次握手）
3.服务器301重定向（从http://example.com重定向到http://www.example.com）
4.浏览器跟踪重定向地址，请求另一个带www的网址
5.服务器处理请求（通过路由读取资源）
6.服务器返回一个HTTP响应（报头中Content-type设置为text/html）
7.浏览器进DOM树构建
8.浏览器发送请求获取嵌在HTML中的资源（如图片、音频、CSS、JS等）
9.浏览器显示完成页面
10.浏览器发送异步请求
24.平时都是用什么实现跨域的？
jsonp：利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态生产的JSON数据。JSONP请求一定需要对方的服务器做支持才可以。
JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性，不安全可能会遭受XSS攻击。
声明一个回调函数，其函数名当做参数，要传递给跨域请求数据的服务器，函数形参为要获取目标数据（服务器返回的data）
创建一个<script>标签，把那个跨域的API数据接口地址，赋值给script的src，还要在这个地址中向服务器传递函数名（可以通过问号传参？callback=show）
服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串
最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的函数，对返回的数据进行操作
CORS：跨域资源共享（CORS）是一种机制；当一个资源访问到另一个资源（这个资源放在不同的域名或者不同的协议或者端口），资源就会发起一个跨域的HTTP请求需要浏览器和服务器同时支持；
1.整个CORS通信，都是浏览器自动完成。浏览器发现了Ajax请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉；
2.实现CORS的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信；
3.服务器对于不同的请求，处理方式不一样，有简单请求和非简单请求；
25.移动端有哪些常见的问题，都是怎么解决的？
点击事件300MS延迟的问题 解决方案：下载fastclick的包
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="device-width，initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.0，user-scalable=no"
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no">
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<!-- ios7.0版本以后，safari上已看不到效果 -->
<meta name="apple-mobile-web-app-capable" content="yes">
26.call、apply、bind三者的异同
共同点：都可以改变this的指向；不同点：call和apply会调用函数，并且改变函数内部this的指向，call和apply传递的参数都不一样，call传递参数使用逗号隔开，apply使用数组传递bind不会调用函数，可以函数内部的this指向应用场景。
1.call经常做继承
2.apply经常跟数组有关系，比如借助于数学对象实现数组最大值最小值
3.bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向