1.对于MVVM的理解
MVVM 是 Model-View-ViewModel 的缩写
Model: 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为
View: 用户操作界面。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View
ViewModel： 业务逻辑层，View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View.
总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。
2.开发中常用的指令有哪些
v-model :一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
v-html: 更新元素的 innerHTML
v-show 与 v-if: 条件渲染, 注意二者区别
使用了v-if的时候，如果值为false，那么页面将不会有这个html标签生成。
v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏
v-on : click: 可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数
v-for:基于源数据多次渲染元素或模板块
v-bind: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
3.请详细说下你对vue生命周期的理解
vue生命周期总共分为8个阶段: 创建前/后，载入前/后，更新前/后， 销毁前/后。
beforeCreate （创建前）vue实例的挂载元素$el和数据对象 data都是undefined, 还未初始化
created (创建后) 完成了 data数据初始化, el还未初始化
beforeMount (载入前) vue实例的$el和data都初始化了, 相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted (载入后) 在el 被新创建的 vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互
beforeUpdate (更新前) 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated （更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy (销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed (销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
4.vue-router 有哪几种导航守卫?
全局守卫
路由独享守卫
路由组件内的守卫
1.全局守卫
vue-router全局有三个守卫：
router.beforeEach 全局前置守卫 进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
router.afterEach 全局后置钩子 进入路由之后
2.路由独享守卫
如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
// ...
}
}
]
})
3.路由组件内的守卫
beforeRouteEnter 进入路由前, 在路由独享守卫后调用 不能 获取组件实例 this，组件实例还没被创建
beforeRouteUpdate (2.2) 路由复用同一个组件时, 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 this
beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用，可以访问组件实例 this
4.Vue与React的区别
vue组件分为全局注册和局部注册，在react中都是通过import相应组件，然后模版中引用；
props是可以动态变化的，子组件也实时更新，在react中官方建议props要像纯函数那样，输入输出一致对应，而且不太建议通过props来更改视图；
子组件一般要显示地调用props选项来声明它期待获得的数据。而在react中不必需，另两者都有props校验机制；
每个Vue实例都实现了事件接口，方便父子组件通信，小型项目中不需要引入状态管理机制，而react必需自己实现；
使用插槽分发内容，使得可以混合父组件的内容与子组件自己的模板；
多了指令系统，让模版可以实现更丰富的功能，而React只能使用JSX语法；
Vue增加的语法糖computed和watch，而在React中需要自己写一套逻辑来实现；
react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等；而 vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。
react做的事情很少，很多都交给社区去做，vue很多东西都是内置的，写起来确实方便一些， 比如 redux的combineReducer就对应vuex的modules， 比如reselect就对应vuex的getter和vue组件的computed， vuex的mutation是直接改变的原始数据，而redux的reducer是返回一个全新的state，所以redux结合immutable来优化性能，vue不需要。
react是整体的思路的就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，组件的横向拆分一般是通过高阶组件。而vue是数据可变的，双向绑定，声明式的写法，vue组件的横向拆分很多情况下用mixin。
5.webpack 是什么？
模块打包工具
6. commonjs ,CMD , ADM 分别是什么？
7.parcel 是什么？ 它和webpack 有什么区别？
是快速和零配置的打包工具
8. webpack 的配置文件作用是什么？
9. loader 是什么？
是打包方案
10.let，const，var的区别有哪些 ？
1.let/const定义的变量不会出现变量提升，而var定义的变量会提升
2.相同作用域中，let和const不能出现重复声明。而var就可以
3.const声明变量时必须设置初始值
4.const声明一个只读的常量，这个常量不可改变。
在这里有个非常重要的点：JS中，复杂数据类型，存储在栈中的是堆内存的地址，存在栈中的这个地址是不变的，但是存在堆中的值是可以变得。
11.箭头函数与普通函数有什么区别
1、普通函数中的this总是指向调用它的那个对象，
箭头函数没有自己的this，他的this永远指向其定义环境，任何方法都改变不了其指向，如call（）、bind（）、apply（）。（正是因为它没有this，所以也就不能用作构造函数，也没有原型对象）
2、箭头函数不能当作构造函数，也就是说，不能使用new命令，否则会报错。
3、箭头函数不能使用yield命令，因此箭头函数不能用作genertor函数。
4、箭头函数没有原型属性。
5、箭头函数不能使用argumen对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。
6、变量提升：由于js的内存机制，function的级别最高，而用箭头函数定义函数的时候，需要var(let、const）关键字，而var所定义的变量不能得到变量提升。故箭头函数一定要定义于调用之前。
12.this的指向问题？
1、普通函数中，this指向其函数的直接调用者；
2、箭头函数中，this指向其定义环境，任何方法都改变不了其指向，如call（）、bind（）等；
3、构造函数中，如果不使用new,则this指向window，如果使用new创建了一个实例，则this指向该实例。
//不使用new指向window
function Person（name）{
console.log(this)// window
this.name = name;
}
Person('inwe')
// 使用new
function Person (name) {
this.name = name
console.log(this) // people
self = this
}
var people = new Peron('iwen')
console.log(self === people) //true
//这里new改变了this指向，将this由window指向Peoson的实例对象people
4、window内置函数中，如setInterval,setTimeout等，其内部的this指向Window。
5、匿名函数的this指向Window。
6、apply()、call()、bind()可以改变this的指向
13.前端性能优化的七大手段
1.减少请求数量
2.减小资源大小
3.优化网络连接
4.优化资源加载
5.减少重绘回流
6.性能更好的API
7.webpack优化
14.route 和 router 的区别是什么？
route是“路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数。
router是“路由实例对象”，包括了路由的跳转方法(push、replace)，钩子函数等。
15.Vuex 有哪几种属性?
有五种，分别是 State、Getter、Mutation、Action、Module
16. vue 首屏加载优化
1. 把不常改变的库放到 index.html 中，通过 cdn 引入
2. vue 路由的懒加载
import或者require懒加载。你打包就会发现，多了很多 1.xxxxx.js；2.xxxxx.js 等等，而 vendor.xxx.js 没了，剩下 app.js 和 manifest.js，而且 app.js 还很小，我这里是 100k 多一点。
3. 不生成 map 文件
找到 config/index.js，修改为 productionSourceMap: false
4. vue 组件尽量不要全局引入
5. 使用更轻量级的工具库
6. 开启gzip压缩
这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。
7. 首页单独做服务端渲染
如果首页真的有瓶颈，可以考虑用 node 单独做服务端渲染，而下面的子页面仍用 spa 单页的方式交互。
这里不推荐直接用 nuxt.js 服务端渲染方案，因为这样一来增加了学习成本，二来服务端的维护成本也会上升，有时在本机测试没问题，在服务端跑就有问题，为了省心，还是最大限度的使用静态页面较好。
17.Vue 3.0 有没有过了解？
关于Vue 3.0有幸看过尤大的关于3.0版本的[RFC Vue Function-based API RFC](https://zhuanlan.zhihu.com/p/68477600)。大致说了三个点，第一个是关于提出的新API `setup()`函数，第二个说了对于Typescript的支持，最后说了关于替换`Object.defineProperty`为 Proxy 的支持。
详细说了下关于Proxy代替带来的性能上的提升，因为传统的原型链拦截的方法，无法检测对象及数组的一些更新操作，但使用Proxy又带来了浏览器兼容问题。
18.vue-cli 替我们做了哪些工作？
首先需要知道 vue-cli 是什么？它是基于 Vue.js 进行快速开发的完整系统，也可以理解成是很多 npm 包的集合。其次，vue-cli 完成的功能有哪些
.vue 文件 --> .js 文件
ES6 语法 --> ES5 语法
Sass,Less,Stylus --> CSS
对 jpg,png,font 等静态资源的处理
热更新
定义环境变量，区分 dev 和 production 模式
19.transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式
三者属性说明
transform 是指变换、变形，是 css3 的一个属性，和 width，height 属性一样；
translate 是 transform 的属性值，是指元素进行 2D(3D)维度上位移或范围变换;
transition 是指过渡效果，往往理解成简单的动画，需要有触发条件。
这里可以补充下 transition 和 animation 的比较，前者一般定义开始结束两个状态，需要有触发条件；而后者引入了关键帧、速度曲线、播放次数等概念，更符合动画的定义，且无需触发条件
20.javascript 的垃圾回收机制讲一下
定义：指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。
像 C 这样的编程语言，具有低级内存管理原语，如 malloc()和 free()。开发人员使用这些原语显式地对操作系统的内存进行分配和释放。
而 JavaScript 在创建对象(对象、字符串等)时会为它们分配内存，不再使用对时会“自动”释放内存，这个过程称为垃圾收集。
内存生命周期中的每一个阶段:
分配内存 — 内存是由操作系统分配的，它允许您的程序使用它。在低级语言(例如 C 语言)中，这是一个开发人员需要自己处理的显式执行的操作。然而，在高级语言中，系统会自动为你分配内在。
使用内存 — 这是程序实际使用之前分配的内存，在代码中使用分配的变量时，就会发生读和写操作。
释放内存 — 释放所有不再使用的内存,使之成为自由内存,并可以被重利用。与分配内存操作一样,这一操作在低级语言中也是需要显式地执行。
四种常见的内存泄漏：全局变量，未清除的定时器，闭包，以及 dom 的引用
全局变量 不用 var 声明的变量，相当于挂载到 window 对象上。如：b=1; 解决：使用严格模式
被遗忘的定时器和回调函数
闭包
没有清理的 DOM 元素引用
- 实现一个基本的 Event Bus
// 组件通信，一个触发与监听的过程
class EventEmitter {
constructor () {
// 存储事件
this.events = this.events || new Map()
}
// 监听事件
addListener (type, fn) {
if (!this.events.get(type)) {
this.events.set(type, fn)
}
}
// 触发事件
emit (type) {
let handle = this.events.get(type)
handle.apply(this, [...arguments].slice(1))
}
}
// 测试
let emitter = new EventEmitter()
// 监听事件
emitter.addListener('ages', age => {
console.log(age)
})
// 触发事件
emitter.emit('ages', 18) // 18
22.实现一个双向数据绑定
let obj = {}
let input = document.getElementById('input')
let span = document.getElementById('span')
// 数据劫持
Object.defineProperty(obj, 'text', {
configurable: true,
enumerable: true,
get() {
console.log('获取数据了')
},
set(newVal) {
console.log('数据更新了')
input.value = newVal
span.innerHTML = newVal
}
})
// 输入监听
input.addEventListener('keyup', function(e) {
obj.text = e.target.value
})
23.Vue 的 nextTick 的原理是什么？
**1\. 为什么需要 nextTick**
Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。
**2\. 理解原理前的准备**
首先需要知道事件循环中宏任务和微任务这两个概念(这其实也是面试常考点)。请阅大佬文章--[彻底搞懂浏览器 Event-loop](https://juejin.im/post/5c947bca5188257de704121d)
常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering
常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;
**3\. 理解 nextTick**
而 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。
如果你比较了解了前面的事件循环原理，推荐你看看这篇文章 请阅大佬文章--[全面解析 Vue.nextTick 实现原理](https://mp.weixin.qq.com/s/mCcW4OYj3p3471ghMBylBw)
24.对前后端跨域可以说一下吗？如何解决跨域的？
九种跨域方式实现原理
25.浏览器 cookie 和 session 的认识。
session 是基于 cookie 实现的。cookie 保存在客户端浏览器中，而 session 保存在服务器上。cookie 机制是通过检查客户身上的“通行证”来确定客户身份的话，那么 session 机制就是通过检查服务器上的“客户明细表”来确认客户身份。session 相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。
cookie 和 session 的区别：
存在的位置：
cookie 存在于客户端，临时文件夹中；session 存在于服务器的内存中，一个 session 域对象为一个用户浏览器服务
安全性
cookie 是以明文的方式存放在客户端的，安全性低，可以通过一个加密算法进行加密后存放；session 存放于服务器的内存中，所以安全性好
生命周期(以 20 分钟为例)
cookie 的生命周期是累计的，从创建时，就开始计时，20 分钟后 cookie 生命周期结束；
session 的生命周期是间隔的，从创建时，开始计时如在 20 分钟，没有访问 session，那么 session 生命周期被销毁。但是，如果在 20 分钟内（如在第 19 分钟时）访问过 session，那么，将重新计算 session 的生命周期。关机会造成 session 生命周期的结束，但是对 cookie 没有影响
访问范围
cookie 为多个用户浏览器共享；session 为一个用户浏览器独享
26.HTTP 状态码
1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态码
100 - 继续 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分
101 - 切换协议 请求者已要求服务器切换协议，服务器已确认并准备切换
2xx（成功）表示成功处理了请求的状态码
200 - 成功 服务器已经成功处理了请求。通常，这表示服务器提供了请求的网页
201 - 已创建 请求成功并且服务器创建了新的资源
202 - 已接受 服务器已接受请求，但尚未处理
203 - 非授权信息 服务器已经成功处理了请求，但返回的信息可能来自另一来源
204 - 无内容 服务器成功处理了请求，但没有返回任何内容
205 - 重置内容 服务器成功处理了请求，但没有返回任何内容
206 - 部分内容 服务器成功处理了部分GET请求
3xx（重定向）表示要完成请求，需要进一步操作；通常，这些状态代码用来重定向
300 - 多种选择 针对请求，服务器可执行多种操作。服务器可根据请求者（user agent）选择一项操作，或提供操作列表供请求者选择
301 - 永久移动 请求的网页已永久移动到新位置。服务器返回此响应（对GET或HEAD请求的响应）时，会自动将请求者转到新位置
302 - 临时移动 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求
303 - 查看其它位置 请求者应当对不同的位置使用单独的GET请求来检索响应时，服务器返回此代码
304 - 未修改 自上次请求后，请求的网页未修改过。服务器返回此响应，不会返回网页的内容
305 - 使用代理 请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理
307 - 临时性重定向 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有的位置来进行以后的请求
4xx（请求错误）这些状态码表示请求可能出错，妨碍了服务器的处理
400 - 错误请求 服务器不理解请求的语法
401 - 未授权 请求要求身份验证。对于需要登录的网页，服务器可能返回此响应
403 - 禁止 服务器拒绝请求
404 - 未找到 服务器找不到请求的网页
405 - 方法禁用 禁用请求中指定的方法
406 - 不接受 无法使用请求的内容特性响应请求的网页
407 - 需要代理授权 此状态码与401（未授权）类似，但指定请求者应当授权使用代理
408 - 请求超时 服务器等候请求时发生超时
409 - 冲突 服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息
410 - 已删除 如果请求的资源已永久删除，服务器就会返回此响应
411 - 需要有效长度 服务器不接受不含有效内容长度标头字段的请求
412 - 未满足前提条件 服务器未满足请求者在请求者设置的其中一个前提条件
413 - 请求实体过大 服务器无法处理请求，因为请求实体过大，超出了服务器的处理能力
414 - 请求的URI过长 请求的URI（通常为网址）过长，服务器无法处理
415 - 不支持媒体类型 请求的格式不受请求页面的支持
416 - 请求范围不符合要求 如果页面无法提供请求的范围，则服务器会返回此状态码
417 - 未满足期望值 服务器未满足“期望”请求标头字段的要求
5xx（服务器错误）这些状态码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错
500 - 服务器内部错误 服务器遇到错误，无法完成请求
501 - 尚未实施 服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码
502 - 错误网关 服务器作为网关或代理，从上游服务器无法收到无效响应
503 - 服务器不可用 服务器目前无法使用（由于超载或者停机维护）。通常，这只是暂时状态
504 - 网关超时 服务器作为网关代理，但是没有及时从上游服务器收到请求
505 - HTTP版本不受支持 服务器不支持请求中所用的HTTP协议版本
27.如何实现一个最大的正方形?
用 padding-bottom 撑开边距
section {
width:100%;
padding-bottom: 100%;
background: #333;
}
28.如何实现左右等高布局
table布局兼容性最好，当然flex布局的align-items: stretch;也行
<div class="layout">
<div class="layout left">left</div>
<div class="layout right">center</div>
</div>
<style>
.layout{
display: table;
width: 100%;
}
.layout div{
display: table-cell;
}
.layout .left{
width: 50%;
height: 200px;
background: red;
}
.layout .right{
width: 50%;
background: yellow;
}
</style>
29.画三角形
.shape {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid blue;
background: white;
}
30.link @import导入css
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
link无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
link支持使用Javascript控制DOM去改变样式；而@import不支持
31.说BFC理解
BFC触发条件：
根元素，即html
float的值不为none（默认）
position的值为absolute或fixed
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption
BFC特性：
内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。（可用于清浮动）
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。
