var let const的区别
1.var可以重复声明，let不可以
2.let有块级作用域，var没有
3.var会与window相映射，let不会
4.var可以在声明前使用，let有暂存死区，不能在声明前使用
5.const声明之后必须赋值，否则就会报错
6.const声明的是不可变的量，改变就会报错
7.const和let一样，不与window相映射，有块级作用域，在声明之前访问会报错

const定义的量是否能够改变
定义基本数据类型的常量是不可变的，定义引用类型的常量是可更改的，但是只改变属性不改变指针
【20210621补充】Object.freeze(obj)，可以冻结对象，但是如果obj中还带有对象的话，还是可以改动的，需要递归才能完全冻结对象

let有什么作用，为什么有了var还需要有let
let修复了var变量提升的问题

【ES6语法相关】

关于string的升级和优化
模板字符串
原型上新增加了includes、startsWith、endsWith等方法

关于数组的升级优化
扩展运算符、解构赋值、
原型上新增加了includes、find方法

关于Number的升级和优化
原型上新增加了isFinite、isNaN的方法

Object的升级和优化
对象属性变量式赋值、对象的解构赋值、对象的扩展运算符
关键字super
原型上新增了assign、Object.keys、Object.values、object.entries方法

function的升级和优化
箭头函数、函数参数默认赋值

数组去重的方法有哪些
1.new set
2.indexOf
3.includes
4.判断对象属性是否相同，不同则放进新的数组
5.给数组排序之后，两两相比较，不同的放进新的数组

map和filter方法的区别
map是新建一个数组，数组中的所有成员都调用一个函数后返回的结果
filter是新建一个数组，其结果是所有成员都调用一个提供的函数后过滤得到的结果

proxy是什么
新增的构造函数，可以理解为js语法的代理，它可以改变js默认的语言行为，如拦截改变默认的方法set和get

Promise是什么
是es6引入的新对象，意在解决js异步机制里，回调机制产生的回调地狱

promise.all、promise.race、promise.finally的区别
promise.all当全部成功时，返回一个数组，当有一个失败的时候，返回失败的状态
promise.race只返回最快响应的那个状态信息，不管时成功还是失败
promise.finally不管状态成功和失败都会执行的函数

什么是回调地狱
就是在使用js的时候，有时候为了实现某些业务逻辑，会写出层层嵌套的回调函数，当嵌套的层级过多时会影响代码的可读性和逻辑性，这种现象称之为回调地狱

for in和for of的区别
1.推荐for in遍历对象，for of遍历数组
2.for in循环出来的是key值，for of循环出来的是value值
3.for of不能循环普通的对象，需要搭配Object.keys一起使用

async/await是什么
是内置执行器generator函数的语法糖，他配合promise近乎完美的实现了js异步编程的解决方案

构造函数和class的区别
class内定义的方法都不能遍历
class必须用new操作符，而构造函数不用new也能执行
class必须先定义才能引用，而构造函数有变量提升的问题，可以在声明之前引用
es5的继承，是先创造子类的实例对象this，再将父类的方法添加到this上
es6的继承，是先将父类实例对象的方法添加到this上面，再用子类的构造函数修改this

promise构造函数是同步执行还是异步执行，then方法呢
构造函数是同步执行的，then方法是异步执行的

promise中的reject和catch处理上有什么区别
1.reject是用来抛出异常的，catch是用来处理异常的
2.reject是promise的方法，而catch是promise实例的方法
3.reject后的东西一定会进入then中的第二个回调，如果没有写第二个回调的话，就进入catch
4.网络异常会直接进入catch而不会进入then的第二个回调

map、forEach和for的区别
map比forEach更快
map返回一个新的数组，不会对原数组产生影响；而foreach会对原数组产生影响，返回的是undefined
map返回一个新的数组所以可以链式调用，而forEach不能
map可以用return，而forEach用return不起作用
forEach不能用break，否则就会报错

css3有哪些新特性【作了解用】
边框圆角：border-radius、阴影：box-shadow
新增的选择器：id、class、tag、通配符*
动画 keyFrame
transform：translate、scale、rotate
媒体查询
多背景 rgba

标准的盒子模型、IE盒子模型【作了解用】
区别就是内容的宽度不一致
标准盒子模型：内容宽度就是content的宽度
IE盒子模型：内容宽度就是content+双边padding+双边border的宽度

box-sizing的属性【作了解用】
content-box：设置元素的width就是content的width
border-box：设置元素的width就是content+border+padding的宽度

css选择器有哪些，哪些可以继承哪些不可以【作了解用】
id、class、tag、属性、兄弟+、父子>、通配*

css优先级算法【作了解用】
！important>id>class>tag
!important>内联样式

css实现元素上下左右居中
行内元素的情况下：
设置text-align:center;line-height:height;
块级元素的情况下：
1.已知宽高的情况
position:absolute;
top:50%;
left:50%;
margin-top:-高/2;
margin-left:-宽/2;
2.未知宽高的情况下
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;

position:absolute;
top/right/left/bottom:0;
margin:auto;

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)

css创建一个三角形
width/height:0;
border-top/right/left:40px solid transparent;
border-bottom:40px solid #ddd;

满屏的品字如何布局
1.已知宽高的情况下
上面的一块设置 margin：0 auto；水平居中
下面的两块，设置float或者inline-block不换行
用margin调整居中的位置
2.未知宽高的情况下
上面的块设置宽为100%
下面的两块设置宽分别为50%，然后设置float/inline-block不换行

常见的兼容性问题
1.不同的浏览器下不同的标签的默认的margin和padding不一致=>所有的标签的margin和padding初始化
2.chrome中文界面下，会强制性的将小于12px的字体显示为10px => 加上样式 -webkit-transform：scale(0.8)
3.超链接访问过后，hover的样式就会消失了=> 调整css的顺序：按照link/visit/hover/active的顺序来写
4.在IE下可以使用常规的方法获取自定义属性，也可以使用getAttribute方法获取自定义属性，但是在firefox下只能使用getAttribute方法获取自定义的属性
=>统一使用getAttribute方法获取自定义属性

为什么要初始化css样式【作了解用】
因为浏览器兼容性问题，不同的浏览器对不同标签的margin和padding的显示不一致，如果不进行初始化的话，会导致不同浏览器页面显示的差异性

display：none和visibility：hidden的区别
display：none就是不显示元素，在文档布局中不再保留其原来的空间
visibility：hidden就是隐藏元素，在文档布局中依然保留其原来的空间

清除浮动的方式
1.给父元素加上高度
2.给最后一个浮动元素的后面加上一个空的div，再加上样式clear:both
3.给包含浮动元素的父元素加上overflow：hidden/auto

css优化提高性能的方法
1.避免过度约束
2.避免后代选择符
3.避免链式选择符
4.使用紧凑的语法
5.避免不必要的命名空间
6.最好使用语义的名字
7.避免不必要的重复
8.避免使用！important
9.尽可能的精简规则，可以合并不同类当中的相同的样式

style标签写在body前和后有什么区别
写在body前，可以使浏览器渲染页面的时候按照从上到下的顺序解析渲染
写在body的话，浏览器解析到写在末尾的style标签的时候。要停下之前的渲染，重新等style中的样式解析渲染完毕之后再重新渲染页面，这又可能造成再windows下的IE下出现fouc现象
即样式加载失败导致的页面闪烁问题

HTML5新特性
1.拖放的api drag
2.语义化标签 article nav header footer等等
3.增强表单属性 email date 等等
4.canvas画图
5.地理定位 geolocationAPI
6.本地存储 localStorage、sessionStorage
7.新的技术 webworker websocket
8.音频和视频 video、audio

svg和canvas的区别【作了解用】
1.svg是用xml来绘制2D图形的，canvas使用js来绘制图形的
2.svg基于xml也就是说svg dom中的每个元素都是可用的，可以为某个元素附加js事件处理器
3.svg绘制的每个图形都被是为对象，当对象的属性改变的时候，浏览器可以识别并重现图形
4.canvas因为是逐像素绘制的，一旦图形绘制完成，就不会再收到浏览器的关注，当图形的位置发生改变的时候，需要整个场景重新绘制

cookie和session的区别
1.cookie是存储在客户端的，session是存在服务端的
2.cookie的安全性相较于session来说更弱，别人可以分析你存在本地的cookie数据，进行cookie欺骗，所以为了安全性考虑，可以使用session
3.session是存在服务端的，当访问增多的时候，session就会占用服务端更多的资源，所以为了服务端的性能考虑，可以使用cookie
4. cookie的存储大小不超过4k，且有的浏览器限制一个站点的cookie数量不能超过20个，但是session的话，最大的存储容量可达到1024k。

cookie、sessionStorage和localStorage的区别
相同点：都存在于客户端，都是同源的
不同点：
cookie始终在同源的http请求中携带，而webstorage的话，始终存在本地
存储大小的差异：cookie最大只能4k，而webstorage的话可以达到4m
时效的差异：sessionstorage是会话级别的，浏览器关闭则失效
localstorage是长期有效，除非用户手动删除
cookie只在设置的有效时间内有效
作用域的差别：sessionStorage不在不同浏览器的窗口共享，即使是同一个页面
cookie和loacalstorage的话，始终在同源的浏览器中共享

如何对网站的文件和资源进行优化
1.压缩文件
2.合并文件
3.使用CDN托管
4.使用缓存
什么是CDN呢
CDN就是内容分布式网络，是构建在现有网络基础上的智能虚拟网络，依靠部署在各地的边缘服务器，利用中心平台的均衡负载、内容分发和调度等功能，
使用户可以就近的获取到所需的资源，降低网络拥堵，提高用户访问的响应速度和命中率

为什么利用多个域名来存储网站资源会更有效
1.方便使用CDN托管
2.节约cookie的带宽
3.突破浏览器的并发限制
4.节约主域名的连接数，提高页面响应的速度
5.可以避免不必要的安全问题

页面导入样式时，使用link和@import有什么区别
1.link是xhtml的标签，所以不仅可以引入css也可以引入其他的事物，但是@import属于css的范畴，只能引入css
2.link引入的样式会随页面的加载一起加载，而@import引入的样式需要等页面加载完毕之后才会加载，甚至要等其他的样式渲染之后才会加载
3.link是xhtml标签，所以没有浏览器兼容性问题，而@import则不支持低版本的浏览器
4.link引入的样式支持js动态改变，而@import不支持
5.link的权重高于@import

列举日常用到的识别对象与基本类型的方法
typeof instanceof object.tostring.call constructor.tostring

列举不同情况下this的指向
直接使用，指向window
在函数内部使用，指向window
new一个对象调用其构造函数，指向新的对象
在对象内部的方法中使用，指向对象

列举日常改变this指向的方法
apply、call、bind

描述事件队列的过程
js是单线程，存在阻塞问题，所以就出现了异步队列，主线程同步执行任务，异步操作就会被添加到异步队列中，等候主线程执行完毕，在进行异步队列的操作

什么是宏任务什么是微任务【作了解用】
异步队列中的任务分为宏任务和微任务
一次事件循环，先执行一个异步队列中的宏任务，再执行所有的微任务，然后再进入下一次的事件循环

宏任务有哪些微任务有哪些【作了解用】
宏任务：settimeout、setinterval、setimidate、I/O、UI Rendering、requestAnimationFrame
微任务：async/await、process.nexttick、promise.then、mutation.observer

对象的浅拷贝和深拷贝有什么区别【作了解用】
当我们声明一个变量a并且赋值，并且让b等于a，由于ab都是基本的数据类型，所以数据都是存储在栈中的，所以改变其中一个变量的数据，他们之间不会相互干扰的，这种拷贝就是深拷贝
而浅拷贝就是改变其中一个变量或者对象的属性的时候，另外一个变量或者对象的属性也会发生变化的话，就是浅拷贝
深拷贝的方法：
lodash：cloneDeep
json：JSON.parse、JSON.stringfy
jquery：$extend
object.assign

return、break、continue的区别
return 中断整个函数的执行
break 退出循环
continue 退出此次循环，进入下一次是否循环的判断

js中的数据类型
基本数据类型：string、number、boolean、undefined、null、symbol
引用数据类型：Array、object

前端性能优化
【内容层面】
使用CDN
避免重定向
避免404
【网络层面】
利用缓存
减少cookie的大小
文件图片预加载
【渲染层面】
js放底部，css放顶部
减少reflow和reload
减少dom
【代码层面】
减少dom的操作
缓存dom节点，减少节点操作，优化css选择器层级
合理使用return、continue、break优化循环

前端安全，中间人攻击
1.xss跨站脚本攻击
2.RSRF跨站请求伪造
3.iframe安全
【CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作】

vue相关
v-if和v-show的区别
v-if是真正意义上的条件切换，它可以保证在条件切换的过程中，条件块内的事件监听器和子组件适当的被销毁和重建
v-if也是惰性的，页面首次加载的时候条件为假的话，则不加载元素，知道条件为真的时候才渲染元素
v-show的话，不管条件是真还是假都会渲染元素，v-show的条件切换只是css意义上的切换

vue.js中key值的作用
在v-for中，key值的作用主要是为了给每个节点增加不同的标识，这样diff算法就能够识别标识找到对应的节点并插入新节点或者更新，总而言之，key的作用就是高效的更新虚拟dom
同样的在使用vue的过程中，如果使用了两个同名的标签的话，也需要用key来进行区分，否则的话，在标签切换的过程中，只会改变属性不会触发过渡效果

computed和watch有什么区别
computed是一个新的属性，并且挂载到vue实例上的，而watch监听的是一个已经存在的并且已经挂在到vue实例中的属性，所以，watch也可以监听computed
computed是一个惰性的求值观察者，当依赖的数据发生变化的时候不会立即更新，而是会等下下一次访问conputed的时候才会重新计算新的值
watch的话，只要依赖的数据发生变化，就会触发调用执行函数

vue-loader是什么
是解析器，可以提取template中的html代码、style中的样式代码和script中的逻辑代码，分别交给不同的loader去处理

active-class是什么
是vue-router中router-link组件的属性，表示的是，设置激活链接时的class属性

vue-router有哪几种导航钩子
全局
router.beforeEach
router.afeterEach
router.beforeResolve
组件内的钩子
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
单独路由独享组件
beforeEnter

为什么vue中的data必须是一个函数
因为对象是引用类型，当重用组件的时候，由于数据对象都指向同一个data对象，当在一个组件中修改data的值的时候，其他重用组件的data也会同时被修改；
而使用返回对象的函数，由于每次返回的都是一个新的对象，引用地址不同，就不会出现这个问题

vue等单页面应用的优缺点【作了解用】
优点：vue是通过尽可能简单的api来实现响应式的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统
优点是mvvm数据驱动、组件化、轻量、简洁、高效、快速、模块友好
缺点：
不支持低版本的浏览器，最低只支持到IE9
不利于SEO优化，如果要支持SEO的话，建议使用服务端渲染
第一次加载首页耗时相对长一些
不可以使用浏览器的导航按钮，需要自行实现前进后退

MVVM和MVC的区别【作了解用】
mvvm和mvc本质上并没有什么区别，都是设计模式的一种
只是将mvc中的controller换成了mvvm中的viewmodel，mvvm解决了mvc中大量的dom操作导致的页面性能问题，且数据模型频繁发生改变的时候不需要开发者主动将数据变化更新到视图上

vue的优点是什么【作了解用】
1.低耦合；视图可以独立于model变化和修改，一个viewmodel可以绑定到不同的view上
2.可重用性；你可以把一个视图的逻辑绑定到一个viewmodel中，让不同的view重用这段逻辑
3.独立开发；开发人员专注于业务逻辑的编写和数据的开发，设计人员可以专注于界面的开发
4.可测试；测试可以针对viewmodel来写

vue的常用修饰符【作了解用】
.stop 阻止提交的页面重载事件
.prevent 阻止事件冒泡
.self 当事件发生在当前元素时触发
.capture 事件侦听，事件发生的时候会调用

v-on可以绑定多个事件吗【作了解用】
阔以，@click @focus @mouseover…

对keep-alive的了解【作了解用】
vue内置的组件，可以让包含其中的组件保留状态，或者避免重新渲染。包含两个属性exclude和include

$route和$router的区别【作了解用】
$route是路由信息对象：path、hash、query、fullpath等信息参数
$router是路由实例对象：包含跳转方法和钩子函数

vue.js的两大核心是什么【作了解用】
数据驱动和组件系统

vue的几种常见的指令
v-on v-bind v-for v-if v-show v-else v-html

vuex是什么，怎么使用
是专门为vue设计的状态管理库，它采用集中式存储管理应用的所有组件的状态
只用来读取的状态放在state中，改变状态的方式是提交mutation，这个是同步的事务
异步的逻辑处理应该封装在action中
项目特别复杂的时候，可以让每个模块有自己的state、mutation和action、getters和modules

vue与angular和react的区别【作了解用】
与angular的区别：
相同点：
都支持指令，内置指令和自定义的指令
都支持过滤器，内置过滤器和自定义的过滤器
都不支持低版本的浏览器
都支持双向数据绑定
不同点：
angular的学习成本更高，而vue本身提供的api都是简单明了的
angular依赖对数据做脏检查，因此watch越多越慢，而vue采用的是依赖追踪的观察结合异步队列的模式，每个数据都是独立触发的

与react的区别
相同点：
react使用jsx的语法，而vue也推崇使用.vue结尾的特殊文件格式，两者都需要编译后使用
中心思想相同，一切都是组件，组件实例之间可以嵌套
都提供合理的钩子函数
都不内置ajax、route等核心功能包，需要通过安装插件的方式进行运用
不同点：
react采用vitual dom的方式需要对渲染出来的数据做脏检查，而vue模板本身提供了指令过滤器等，可以方便快捷的操作DOM

vue的路由实现，hash模式和history模式
hash就是url中#号以及#号后面的字符被称作hash，可以通过window.location.hash获取
hash模式下，虽然在路由中，但是hash不被包括在http请求中，只是指导浏览器的行为，因此对服务端是安全无用的，hash也不会重载页面。因此，即使服务端没有做到覆盖所有的路由，也不会报404的错误
而history模式下，history使用了html5的新特性，且提供了两个新的函数pushState和replaceState可以修改浏览器的历史记录栈，postate则可以事件监听到状态变更
在此种模式下，客户端的url必须和发给服务端请求的url保持一致，如果服务端没有做到对路由的全覆盖的话，就会报404错误

第一次页面加载会触发哪几个钩子函数【作了解用】
beforeCreate、created、beforeMount、mounted

DOM渲染在哪个周期就已经完成了【作了解用】
mounted

vue组件间数据传递的方式有哪些【每次必问】
props/$emit
eventbus
provide/inject
vuex
$refs
mixin

什么是vue的生命周期【作了解用】
就是vue实例从创建到销毁的过程，从开始创建，绑定数据，编译模板到挂在dom，渲染、更新-渲染、销毁等一系列的过程称之为vue的生命周期

vue的生命周期和钩子函数
beforeCreate：创建vue对象
created：绑定了vue对象属性
beforeMount：生成了真实DOM
mounted：DOM的数据挂载到了页面上

vue如何实现双向绑定【每次必问】
将mvvm作为数据绑定的入口，整合了observer、watcher、compile三者，通过observer监听数据的变化，通过compile解析编译vue的模板指令，
通过watcher搭起compile和observer的通信桥梁，达到数据模型变化触发视图更新，视图更新触发数据模型的变化的双向绑定的效果
*一般回答到上面就基本可以了，下面的部分是细化的，可以继续回答*
实现一个observer，遍历所有的数据属性，包括子数据的属性，通过object.defineProperty给每个属性加上getter和setter，
当数据属性发生变化的时候，会触发setter，从而监听到数据的变化
实现一个编译器compile，编译器会解析编译模板指令，将模板中的变量替换成数据，完成页面的初始化渲染，并且将每个指令对应的节点绑定更新函数，添加事件监听的订阅器，
当监听到数据变化的消息时，调用对应的更新函数进行更新
实现一个订阅者watcher，watcher是compile和observer之间的桥梁，主要任务是订阅observer中数据变化的消息，当收到数据变化的消息的时候，调用compile中的更新函数进行更新
实现一个订阅器dep，采用发布-订阅者设计模式的订阅器，其主要作用是手机watcher订阅者，将compile和watcher进行统一的管理

对于mvvm的理解
mvvm是model view viewmodel的缩写，model是数据模型，view是视图，viewmodel是数据模型和视图之间连接的对象，作用是监听数据模型的改变和控制视图交互
在mvvm中，view和model是没有直接联系的，通过viewmodel进行交互。因为viewmodel和model是双向的，所以view的改变会直接同步到model中，model的变化也会直接影响到view。
再mvvm模式下，这些同步都是自动的，无需认为干涉，开发者可以专注于业务代码的编写，不需要手动操作DOM，复杂的交互都是mvvm统一管理

简历相关
简历上写了首屏加载缓慢，解决这个问题都做了哪些操作(简历相关)待补充
1.减少入口文件体积，利用路由懒加载
2.UI框架按需加载
3.图片资源的压缩，icon使用雪碧图
4.开启gzip压缩
5.webpack相关配置的优化
6.前端页面代码层面的优化
【gzip】：是一种http请求优化方式，通过减少文件体积来提高请求速度；前端配置gzip压缩，服务端使用nginx开启gzip压缩；安装插件compression-webpack-plugin；开启了gzip之后，打包会自动生成gz文件，且浏览器的请求响应头会出现content-Encoding:gzip；
【webpack配置】：1.使用uglifyjs-webpack-plugin代替webpack自带的UglifyJsPlugin插件来压缩js文件 2.生产环境关闭源码映射 3.清除打印日志和debugger信息 4.使用mini-xss-extract-plugin抽取css到单独的文件，并且使用optimize-assets-webpack-plugin来压缩css 文件
【代码层面的优化】：1.合理使用v-if和v-show 2.合理使用computed和watch 3.v-for时加上key属性；v-if和v-for不同时使用 3.销毁定时器

路由异步加载的话，怎么实现 (简历延申)
将路由文件中的引入文件的import换成路由配置时候的component的require方式引入。

import和require这两种引入方式有什么区别(简历延申)
require是遵循CommonJS的规范，import是es6的语法。require引入的是值的拷贝、运行时加载，import引入的是值的引用、编译时就会输出接口

vuex滥用的话，是指什么滥用了，会导致什么问题(简历相关)
代码可读性

使用$emit/props和使用vuex的话有什么区别–性能和安全性方面考虑的话(简历延申)
vuex存在页面刷新数据清空的问题，所以我们会把数据先存在webstorage中，但是webstorage中的数据是可以改变的，所以存在安全问题
解决:
1.可以在mouted中先删除webstorage再写入
2.可以使用插件vuex-persistedState

mutation和action有什么区别(简历延申)
1.流程顺序，相应视图-＞修改state，或者是视图触发action，action再触发mutation
2.角色定位，mutation专注于修改state，理论上来说是修改state的唯一途径。action，业务代码，异步请求。
3.限制，mutation必须同步执行，action可以异步，但不能直接操作state

mutation可以进行异步操作吗(简历延申)
不能，每个mutation执行完成后，都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现time-travel了，如果mutation支持异步操作的话，就没有办法知道是何时更新了状态的，就会给调试带来困难。

代码量庞大的话，怎么解决这个问题(简历相关)
拆分了微服务和公共组件库

封装组件的话需要做到哪些方面，才能使这个组件简单可用性高(组件封装的原则)
1.数据从父组件传入。子组件本身尽量不生产数据，如果需要生成数据的话，只能在组件内部使用，不要传递出去
2.在父组件中处理事件。比如和后端的交互，子组件内部的交互行为则在子组件中处理
3.记得留一个slot。一个通用的组件，往往不能适应所有的应用场景，所以在封装组件的时候，只需要完成80%的功能，剩下的20%父组件可以通过slot完成
4.不要依赖vuex。如果要抽离组件，尽量不要使用vuex来实现参数的传递，因为vuex是用来管理组件状态的，可以用来传参但是不推荐，可以选择放到localstorage中或者通过props传递
5.合理使用scoped。样式中添加scoped可以让样式只运用于当前组件，但是一味的使用scoped会产生重复的代码，所以需要一个全局的样式，组件内只写针对组件的样式，避免重复的样式代码
6.组件具有单一职责。封装业务组件或者基础组件，如果不能给这个组件取一个有意义的名字，证明这个组件承担的职业不够单一，需要继续抽组件，直到它是一个独立的组件即可

为什么有了UI库还需要封装单独的组件(简历延申)
因为不满足业务需求

vue中nexttick的作用和原理
作用: 在数据改变之后立即使用这个方法，可以拿到更新之后的DOM
原理: 1.vue用异步队列的方式来控制DOM更新和nexttick回调先后执行
2.微任务因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕
3.因为浏览器和移动端的兼容问题，vue不得不做了微任务向宏任务的向下兼容方案

$set有什么作用，$set的原理
作用: 使对象和数组的更新是响应式的
原理: 该方法内部是一个循环处理的过程，如果当前新增监听是一个对象，那就继续调用自己行成一个递归，直到最后的属性是一个数组或者非对象类型的参数后，递归结束，然后为自己添加监听，在监听中又会触发其他相关的方法（dep中订阅的事件就会被触发），行成我们常见的双向数据绑定。
由于object.defineProperty只能监听对象的变化，所以对于数组内某一个索引值发生的变化是不能监听到的，于是还要手动调用vue.set方法去触发更新，这时候的vue.set只会做值的更新，而不会重复新增监听

vue–什么时候会触发Array或者object中的监听事件，什么时候不会

new一个新对象的时候做了哪些事
1…创建一个空对象
2.把this指向创建的空对象，并且把this的constructor指向构造函数
3.执行构造函数

手写一个对象深拷贝需要考虑哪些方面的问题(层级递归，对象中嵌入了函数或者变量的情况)
答 :
Js库等提供的深拷贝方法只能拷贝简单的对象，如果对象中包含复杂对象，函数，数组的场景的话，需要自己手写深拷贝的方法
循环这个对象，判断当前成员是否是object，如果是的话就调用自身递归，如果不是就把它添加到新的对象里面

Vue底层函数如何监听事件
原生事件的绑定是通过addEventListener
组件事件的绑定是通过Vue自定义的key $on来实现的（很复杂，但是要看一下）

为什么不能使用箭头函数来定义watcher函数
理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望值指向vue实例，this.x将会是undefined

eventBus的实现原理
实例化一个vue实例，并赋值给了一个全局变量，那么我们就可以在任何地方使用这个全局变量。
原理待补充

路由的钩子函数有哪些，都有哪些参数
全局的钩子函数，
beforeEach
组件内的钩子函数，
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
单个路由独享的钩子函数
beforeEnter
参数:to from next

typeof null 返回object
instance of null 返回异常信息

什么是原型链
原型链是针对构造函数的，比如我创建了一个plane的构造函数，给它赋值了fly的方法。再创建了一个flighter的构造函数，让它继承plane。当我访问new出来的这个对象属性时，发现它并没有这些属性和方法，它就会往上查找，这个查找的过程就是原型链

V-for的key可以用下标吗
可，不过可能会有数组顺序改变的情况

Async await如何捕获异常
try catch

Vuex如何做到不能直接改变状态值的
答案待补充

hash和history模式的区别
在浏览器符号中#以及#号之后的字符被称作hash，用window.location.hash
hash虽然存在url中，但不被包括在HTTP请求中，用来指导浏览器的动作，对服务端安全无用，hash不会重载页面。hash模式下，仅hash符号之前的内容会被包含在请求中。因此，对于后端来说，即使没有做到对路由的全覆盖也不会返回404的错误
history模式下采用HTML5的新特性，且提供了两个新方法：pushState、replaceState可以对浏览器的历史记录栈进行修改，以及popState事件的监听到状态变更。在此模式下，前端的URL必须和实际向后端发起请求的URL保持一致。如果后端没有做到对路由的全覆盖就有可能返回404的错误。

hash模式如何监听路由变化
hash：hashChange
history： pushState replaceState popState

For in 和object.keys的区别，遍历的属性有什么区别
for in用来枚举对象的属性，某些情况下可能根据随机顺序遍历数组元素
Object.keys则是返回以对象的属性为元素的数组
for in 循环会枚举对象原型链上可枚举的属性，而object.keys不会

webpack打包速度优化方法
Async await和promise的区别，优缺点

全等号和双等号有什么区别
一个等号是赋值操作，两个等号是先转换类型再比较，三个等号是先判断类型，如果不是同一类型直接判断为flase

判断数据类型的方法
引用数据类型，除了function可以用typeof判断，其他的都返回object；
因此可以用instance of判断，instance of会判断对象A是不是另一个对象B的实例，它在底层会查看对象B是不是在对象A的原型链上存在着，如果存在则返回true，否则返回false；
更为强大的方法，object.prototype.toString.call()，这个方法可以通过查看对象的内部属性[[class]]，它的值是一个字符串，可以通过这个属性判断这个对象是什么类型的；该方法被调用时，执行以下步骤:
1.查找对象的内部属性[[class]]的值
2.将该值放在两个字符串"[object,"和"]"中间
3.返回拼接完的字符串
*该方法遇到Null时返回"[object,Null]"，遇到undefined时，返回"[object,Undefined]"

数据类型转换的方法:显示类型转换和隐式类型转换【作了解用】
显示类型转换可以调用的方法，Boolean()，String()，Number ()，parseInt()，parseFloat()，toString()[null和undefined值没有这个方法]
隐式类型转换的三种转换方式，
将值转为原始值:toPrimitive()
将值转换为数字:toNumber()
将值转换为字符串:toString()
*数字和字符串相加，数字会转换成字符串
真值判断时，参数会被转换成布尔值
比较运算、算数运算和自增减运算时，转换成number类型的值
当对象需要进行隐式转换时，会取得对象的toString方法和valueof方法的返回值

关于NaN【作了解用】
NaN是一个特殊的数值，表示非数值。
1.任何涉及NaN的运算操作都会返回NaN
2.NaN与任何值都不相等，包括NaN本身
3.isNaN方法首先会将参数隐式转换成number，如果无法转换为数值则返回true

老版本浏览器拼接字符串时速度很慢的原因【作了解用】
因为js中的字符串是不可变的，字符串一旦被创建，它们的值就不能被改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量，这个过程发生在后台。

JS运行步骤【作了解用】
1.语法分析。检查代码是否有语法错误
2.预编译。
3.解释执行。将程序一行行执行

预编译的过程【作了解用】
全局作用域下:
1.会创建一个全局的对象(GO对象，Global Object)
2.并将变量声明和函数声明提升
3.提升后的变量默认初始化为undefined，函数则将整个函数体进行提升
4.将它们存放到全局变量中
函数内部 :
函数内部是一个独立的作用域
1.函数内部创建一个活动对象(AO对象，Active Object)
2.将形参和变量声明，以及内部的函数声明进行提升
3.形参和变量初始化为undefined，内部函数依然为内部函数体本身
4.然后将它们存放到活动对象中

解释执行的过程【作了解用】
根据先后顺序依次对形参和变量进行赋值操作。引擎会在作用域上查找是否有对应的形参和变量，如果找到了就会对其赋值。
在非严格模式下，若变量未经声明就进行赋值的话，引擎会在全局环境自动隐式的为该变量创建一个声明
在严格模式下，对未经声明的变量进行赋值操作则会报错。因为js执行是单线程的，所以如果在赋值操作(LHS查询)执行前就对变量进行获取(RHS查询)并输出，就会得到undefined的结果，因为此时变量还未进行赋值

作用域链
对于函数来说，scope属性包含了函数被创建的作用域中的对象的集合–作用域链

函数创建时: 在全局环境中创建函数时，该函数的作用域链会插入一个全局的对象，包含所有在全局范围内定义的变量。
函数执行时: 会为函数创建一个执行上下文的内部对象。每个执行上下文都有自己的作用域链。当执行上下文被创建时，它的作用域链顶端先初始化当前执行函数scope中的对象。紧接着，函数运行时的活动对象也会被推入到作用域链的最顶端。
*函数每次执行对应的执行上下文都是独一无二的，如果多次调用同一个函数就会创建多个执行上下文。函数执行完毕的话，执行环境就会被销毁

构造函数
new 实例化构造函数时，做了什么
1.创建一个this的空对象
2.执行构造函数中的代码(为当前this对象添加属性)
3.隐式返回当前this对象

原型与原型链
原型就是函数特有的属性，只要创建了一个函数就会创建一个prototype属性并指向该函数的原型对象

实例的隐式原型_proto_会指向类的显示原型prototype(这俩是相等的)

项目中遇到的难题，以及如何解决【每次必问】

做过比较有成就感的功能
比较擅长的技术栈
一个业务场景：
需要同时修改100个人的表单，在同一个页面，页面会出现卡顿，提交表单的时候校验100个表单性能也有问题。
如何从技术方面去提高这个性能