前端面试题汇总（vue+html基础）新最最全
一、HTML基础部分
1、什么是盒子模型？（重要）
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
2、CSS实现垂直水平居中 （重要）
总结：内联元素和块级元素的水平居中方式
内联元素居中布局方式
①水平居中
行内元素可设置text-align：center
flex布局设置父元素：display:flex;justify-content:center
②垂直居中
单行文本父元素确定高度：height == line-height
多行文本父元素确定高度：display:table-cell;vertical-align:middle
块级元素居中布局方式
①水平居中
定宽：margin:0 auto
flex布局设置父元素：display:flex;justify-content:center
绝对定位+负值margin
绝对定位+transform:translateX(-50%)
table-cell布局设置父元素：display:table-cell;text-align:center
②垂直居中
flex布局设置父元素：display:flex;align:center
display布局设置父元素：display:tabel-cell;vertical-align:middle
position：absolute+负值margin
position:absolute+transform:translateY(-50%)
3、简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
4、简述同步和异步的区别
1、同步的概念应该是来自于操作系统中关于同步的概念。
2、不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式)。同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。
3、同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
4、异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
5、px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
6、JavaScript部分怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
* createDocumentFragment() //创建一个 DOM 片段
* createElement() //创建一个具体的元素
* createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
* appendChild() //添加
* removeChild() //移除
* replaceChild() //替换
* insertBefore() //插入
3）查找
* getElementsByTagName() //通过标签名称
* getElementsByName() //通过元素的 Name 属性的值
* getElementById() //通过元素 Id，唯一性
7、JS有哪些数据类型
基本数据类型(值类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)。
特殊的对象：正则（RegExp）和日期（Date）。
特殊类型：underfined 未定义、Null 空对象、Infinate 无穷、NAN 非数字
8、什么是深拷贝，怎么实现深拷贝
https://www.jb51.net/article/229259.htm
浅拷贝只会发生在引用类型身上，对于引用类型如果之进行简单的赋值，只会赋值指向堆内存的指针，这种称为浅拷贝。而深拷贝就是完全拷贝一个引用类型，为不是地址指针。
实现深拷贝的方式：
Object.assign
JSON.parse(JSON.stringify( ))
9、如何消除一个数组里面重复的元素？
1.ES6的Set类数组去重
var arr = [1,2,2,3,3,4,4,1,5,6,6,5]
function unique (arr) {
return Array.from(new Set(arr))
}
console.log(unique(arr))
//[1,2,3,4,5,6]ES6的Set是类数组，里面的值是唯一的，但是不是真正的数组所以要通过Array.from()方法转化为数组，不考虑兼容问题是最简单的去重方法
2.for循环嵌套for循环
var arr = [1,2,2,3,3,4,4,1,5,6,6,5];
function unique(arr) {
for (var i = 0; i < arr.length; i++) { // 首次遍历数组
for (var j = i + 1; j < arr.length; j++) { // 再次遍历数组
if (arr[i] == arr[j]) { // 判断连个值是否相等
arr.splice(j, 1); // 相等删除后者
j--;
}
}
}
return arr
}
console.log(unique(arr));两个for循环加上spliceES5常用的方法
第一个for遍历每个数组项，第二个for循环遍历第一个for循环当前遍历项后面的数组项与第一个for当前数组项作比较，后面存在相等的项，则删除掉此项，并且j要减一，因为删除了一项，所以后面的元素往前移了，所以减一来抵消迁移确保每一项遍历完
3.indexOf去重
var arr = [1,2,2,3,3,4,4,1,5,6,6,5];
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('错误！')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) { // 首次遍历数组
if (array.indexOf(arr[i]) === -1) { // 判断索引有没有等于
array.push(arr[i])
}
}
return array
}
console.log(unique(arr));indexOf()会判断数组里面是否含有这个值，没有则返回-1，有则返回存在的数组下标值，有多个只返回第一个，不再继续判断
for循环加indexOf，for循环存在newArr里则什么都不做，不存在则加入新数组里，返回新数组
4.利用filter
var arr = [1,2,2,3,3,4,4,1,5,6,6,5];
function unique(arr) {
return arr.filter( (item, index, arr) => {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item) === index;
});
}
console.log(unique(arr));filter加indexOf，判断当前的索引值等不等于indexOf返回的索引值，等于就是同一个数组项，不等于的情况就是当前的item是第二次出现，而indexOf判断出来的下标值还是第一个，这一项则不会返回，所以达到了去重的要求
10、请描述一下cookies，sessionStorage和localStorage的区别?
1、cookie在浏览器与服务器之间来回传递
sessionStorage 和 localStorage 不会把数据发给服务器，仅在本地保存
2、数据有效期不同
cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
sessionStorage：仅在当前浏览器窗口关闭前有效
localStorage： 始终有效，长期保存
3、cookie 数据还有路径的概念，可以限制 cookie 只属于某个路径下
存储大小也不同，cookie 数据不能超过4k，sessionStorage 和localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到5M或更大
4、作用域不用
sessionStorage：不在不同的浏览器窗口中共享
localStorage：在所有同源窗口中都是共享的
cookie：也是在所有同源窗口中都是共享的
Storage：支持事件通知机制，可以将数据更新的通知发送给监听者。
11、css如何清除浮动
第一种 clear:both
取值：
1、none
默认值，不做任何清除浮动的操作
2、left
清除前面元素左浮动带来的影响
3、right
清除前面元素右浮动带来的影响
4、both
清除前面元素所有浮动带来的影响
优势：代码量少 容易掌握 简单易懂
第二种 额外标签法
额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）
第三种父元素添加overflow:hidden 或 auto
第四种 父元素添加：after伪类清除浮动
第五种父元素添加display: table;
参考答案常用的一般为三种.clearfix, clear:both,overflow:hidden;
比较好是 .clearfix,伪元素万金油版本,后两者有局限性.
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}.clearfix:before, .clearfix:after { content:""; display:table;}.clearfix:after{ clear:both; overflow:hidden;}.clearfix{ zoom:1;}clear:both:若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷
overflow:hidden:这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷
12、display: block;和display: inline;的区别
参考答案block元素特点：
1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align
inline元素特点
1.水平方向上根据direction依次布局
2.不会在元素前后进行换行
3.受white-space控制
4.margin/padding在竖直方向上无效，水平方向上有效
5.width/height属性对非替换行内元素无效，宽度由元素内容决定
6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定 7.浮动或绝对定位时会转换为block8.vertical-align属性生效
13、谈谈定位
static: 正常⽂档流定位，此时 top, right, bottom, left 和 z-index 属性⽆效，块级元素从上往下纵向排布，⾏级元素从左向右排列。
relative：相对定位，此时的『相对』是相对于正常⽂档流的位置。
absolute：相对于最近的⾮ static 定位祖先元素的偏移，来确定元素位置，⽐如⼀个绝对定位元素它的⽗级、和祖⽗级元素都为relative，它会相对他的⽗级⽽产⽣偏移。
fixed：指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如那种回到顶部的按钮⼀般都是⽤此定位⽅式。
sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应⽤中的近似效果就是IOS通讯录滚动的时候的『顶屁股』。
14、CSS 如何计算优先级？
就近原则，同权重情况下以样式定义最近者为准；
载入样式以最后载入的定位为准；
优先级：
!important > id > class > tag
important 比 内联优先级高
设置元素浮动后，该元素的 display 值是多少？（自动变成display:block）
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = “external”]）
伪类选择器（a: hover, li: nth – child）
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
优先级就近原则，同权重情况下样式定义最近者为准;
15、HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5
新增加了图像、位置、存储、多任务等功能。
新增元素：
canvas
用于媒介回放的video和audio元素
本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article footer header nav section
位置API：Geolocation
表单控件，calendar date time email url search
新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
拖放API：drag、drop
移除的元素：
纯表现的元素：basefont big center font s strike tt u
性能较差元素：frame frameset noframes
区分：
DOCTYPE声明的方式是区分重要因素
根据新增加的结构、功能来区分
16、元素的alt和title有什么异同？
在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。
17、什么是文档流
文档流可以分为，普通流和脱离文档流
普通流：也可称为常规流、文档流。是文档中可显示对象在排列时所占的位置
脱离文档流：元素浮动在文档流之上
以上是定义，以下是理解：
所谓文档流，可以理解为是元素的位置，比如，relative定位的元素就处于文档流。此时，通过left、top、bottom、right四个属性可以规定元素的位置，但元素出现在你所规定的位置之后，它原来的位置依旧保留，其他元素不能占用。而用absolute、fixed定位的元素，就脱离了文档流，也就是说，自己规定了元素的位置之后，元素的原位置不保留了，可以理解为元素发生了一个简单地“平移”。注意，浮动元素也会脱离文档流
18、绝对定位相对定位有什么区别
relative：
1、relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局
absolute：
1、在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位
2、父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位
（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。
- absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位。
简单的讲如果设置了相对位置，那么绝对位置会根据最近的相对位置进行定位（某种程度上来说相对位置就像锚点，而绝对位置就是锚，但是这个锚点不能脱离文档流就是不能脱离大海。）
19、JS 中 == 和 === 区别是什么？
1、对于string,number等基础类型，==和===有区别
1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等。
2）同类型比较，直接进行“值”比较，两者结果一样。
2、对于Array,Object等高级类型，==和===没有区别
进行“指针地址”比较。
3、基础类型与高级类型，==和===有区别
1）对于==，将高级转化为基础类型，进行“值”比较。
2）因为类型不同，===结果为false。
20、JS中的匿名函数是什么？
匿名函数：就是没有函数名的函数，如：
(function(x, y){
alert(x + y);
})(2, 3);
这里创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数。
21、如何在JS中动态添加/删除对象的属性？
咱们可以使用object.property_name = value向对象添加属性，delete object.property_name 用于删除属性。
例如：
let user = new Object();
// adding a property
user.name='Anil';
user.age =25;
console.log(user);
delete user.age;
console.log(user);
22、解释 JS 事件委托模型？
在JS中，有一些很酷的东西。其中之一是委托模型。当捕获和冒泡时，允许函数在一个特定的时间实现一个处理程序到多个元素，这称为事件委托。事件委托允许将事件侦听器添加到父节点而不是指定的节点。这个特定的侦听器分析冒泡事件，以找到子元素上的匹配项。
23、JS中如何将页面重定向到另一个页面？
使用 location.href：window.location.href =“https://www.onlineinterviewquestions.com/”
使用 location.replace： window.location.replace(" https://www.onlineinterviewquestions.com/;");
24、什么是闭包
当我第一次解释闭包时，我常说函数中的函数;但是，它没有正确地描述闭包的确切含义。
闭包是在另一个作用域内创建一个封闭的词法范围。它通常会自动返回来生成这个词法环境。这个环境由创建闭包时在作用域内的任何局部变量组成。它就像一个微型工厂，用这些原料生产出具有特定功能的产品。
function add(n){
var num = n
return function addTo(x){
return x + num
}
}
addTwo = add(2)
addTwo(5)闭包的另一个应用是创建私有变量和方法。JavaScript不像Java那样可以很好地支持oop。在JS中没有明确的方法来创建私有方法，但是闭包可以私有方法。
25、解释一下变量的提升
变量的提升是JavaScript的默认行为，这意味着将所有变量声明移动到当前作用域的顶部，并且可以在声明之前使用变量。初始化不会被提升，提升仅作用于变量的声明。
var x = 1
console.log(x + '——' + y) // 1——undefined
var y = 2
26、原型和原型链是什么？
javascript原型与原型链
每个函数都有一个prototype属性，被称为显示原型
每个实例对象都会有_ _proto_ _属性,其被称为隐式原型
每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype
每个prototype原型都有一个constructor（看次chua克特）属性，指向它关联的构造函数。
原型链
获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。
二、vue部分
https://www.cnblogs.com/wenshaochang123/p/14888494.html
1、MVC 和 MVVM 区别 （了解即可，了解什么是MVVM）
MVC
MVC全名是 Model View Controller,时模型 - 视图 - 控制器的缩写，一种软件设计典范。
Model(模型)：是用于处理应用程序数据逻辑部分。通常模型对象负责在数据库中存取数据。
View(视图)：是应用程序中处理数据显示的本分。通常视图是依据模型数据创建的。
Controller(控制器)：是应用程序处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
MVC的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。
MVVM
MVVM新增了VM类。
ViewModel层：做了两件事达到了数据的双向绑定，一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。 实现的方式时：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转换成后端的数据。实现的方式是：DOM事件监听。
MVVM与MVC最大的区别就是：实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再手动操作Dom元素来改变View的显示。 而是改变属性后该属性对应的View层显示会自动改变（对应Vue数据驱动的思想）
整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也察觉不到View，这种低耦合模式提高代码的可重用性。
注意：Vue并没有完全遵循MVVM的思想，这一点官网自己也有声明。
那么问题来了，为什么官方要说Vue没有完全遵循MVVM思想呢？
严格的MVVVM要求View不能和Model直接通信，而Vue提供了$refs这个属性，让Model可以直接操作View，违反了这一规定，所以是Vue没有完全遵循MVVM
什么是MVVM？
MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。
View 的变化会⾃动更新到 ViewModel ， ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动
同步是因为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作
2、为什么data是一个函数
组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
3、Vue组件通讯有哪些方式？（必考）
1、props 和 $emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。
2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件。
3、$attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。
4、父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。（官方不推荐在实际业务中适用，但是写组件库时很常用。）
5、$refs 获取组件实例。
6、envetBus 兄弟组件数据传递，这种情况下可以使用事件总线的方式。
7、vuex 状态管理。
父传子
在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值。
⼦传⽗
首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了
⾮⽗⼦组件通信
通过中央事件总线,我们也称之为eventBus,
在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫b u s 传 数 据 的 时 候 用 t h i s . bus 传数据的时候用this.bus传数据的时候用this.bus.e m i t 传 在 要 接 受 数 据 的 子 组 件 在 c r e a t e d 钩 子 函 数 中 用 emit传 在要接受数据的子组件 在 created钩子函数中 用emit传在要接受数据的子组件在created钩子函数中用on 方法接收
4、Vue的生命周期方法有哪些？一般在哪一步发送请求？（必考）
beforeCreate 在实例初始化之后，数据观测（data observe）和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。
created 实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测（data observe ），属性和方法的运算，watch/event 事件回调。这里没有 $el，如果非要想与 DOM 进行交互，可以通过vm.$nextTick 来访问 DOM。
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted 在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom节点。
beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁 （patch）之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated 发生在更新完成之后，当前阶段组件 Dom 已经完成更新。要注意的是避免在此期间更新数据，因为这个可能导致无限循环的更新，该钩子在服务器渲染期间不被调用。
beforeDestroy 实例销毁之前调用。在这一步，实力仍然完全可用。我们可以在这时进行 善后收尾工作，比如清除定时器。
destroy Vue实例销毁后调用。调用后，Vue实例指示的东西都会解绑定，所有的事件监听器会被移除，左右的子实例也会被销毁，该钩子在服务器端渲染不被调用。
activated keep-alive 专属，组件被激活时调用
deactivated keep-alive 专属，组件被销毁时调用
异步请求在哪一步发起？
可以在钩子函数 created、beforeMount、mounted 中进行异步请求，因为在这三个钩子函数中，data已经创建，可以将服务器端返回的数据进行赋值。
如果异步请求不需要依赖 DOM 推荐加载 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：
能更快获取到服务端数据，减少页面loading时间；
ssr 不支持 beforeMount、mounted 钩子函数，所以放在 created 中有助于一致性。
5、v-if 和 v-show 的区别 （重要）
v-if 在编译过程中会被转化成三元表达式，条件不满足时不渲染此节点。
v-show 会被编译成指令，条件不满足时控制样式将此节点隐藏（display:none）
使用场景
v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景。
v-show 适用于需要非常频繁切换条件的场景。
扩展补充：display:none 、 visibility:hidden 和 opacity:0 之间的区别？
三者公共点都是隐藏。不同点：
一、是否占据空间。
display:none，隐藏之后不占位置；visibility:hidden、opacity:0，隐藏后任然占据位置。
二、子元素是否继承。
display:none --- 不会被子元素继承，父元素都不存在了，子元素也不会显示出来。
visibility:hidden --- 会被子元素继承，通过设置子元素 visibility:visible 来显示子元素。
opacity:0 --- 会被子元素继承，但是不能设置子元素 opacity:0 来先重新显示。
三、事件绑定。
display:none 的元素都已经不存在了，因此无法触发他绑定的事件。
visibility:hidden 不会触发他上面绑定的事件。
opacity:0 元素上面绑定的事件时可以触发的。
四、过度动画。
transition对于display是无效的。
transition对于visibility是无效的。
transition对于opacity是有效的。
6、说说 vue 内置指令 （了解即可）
v-once - 定义它的元素或组件只渲染一次，包括元素或组件的所有节点，首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。
v-cloak - 这个指令保持在元素上直到关联实例结束编译 -- 解决初始化慢到页面闪动的最佳实践。
v-bind - 绑定属性，动态更新HTML元素上的属性。例如 v-bind:class。
v-on - 用于监听DOM事件。例如 v-on:click v-on:keyup
v-html - 赋值就是变量的innerHTML -- 注意防止xss攻击
v-text - 更新元素的textContent
v-model - 1、在普通标签。变成value和input的语法糖，并且会处理拼音输入法的问题。2、再组件上。也是处理value和input语法糖。
v-if / v-else / v-else-if。可以配合template使用；在render函数里面就是三元表达式。
v-show - 使用指令来实现 -- 最终会通过display来进行显示隐藏
v-for - 循环指令编译出来的结果是 -L 代表渲染列表。优先级比v-if高最好不要一起使用，尽量使用计算属性去解决。注意增加唯一key值，不要使用index作为key。
v-pre - 跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度
7、怎样理解 Vue 的单项数据流 （了解即可）
数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父组件的状态，从而导致你的应用的数据流向难以理解。
注意：在子组件直接用 v-model 绑定父组件传过来的 props 这样是不规范的写法，开发环境会报警告。
如果实在要改变父组件的 props 值可以再data里面定义一个变量，并用 prop 的值初始化它，之后用$emit 通知父组件去修改。
8、computed 和 watch 的区别和运用的场景。（重要）
computed 是计算属性，依赖其它属性计算值，并且 computed 的值有缓存，职友集当计算值变化才会返回内容，他可以设置getter和setter。
watch 监听到值的变化就会执行回调，在回调中可以进行一系列的操作。
计算属性一般用在模板渲染中，某个值是依赖其它响应对象甚至是计算属性而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。
Computed 和 Watch 的区别（说出来几条就行）
对于Computed：
它支持缓存，只有依赖的数据发生了变化，才会重新计算
不支持异步，当Computed中有异步操作时，无法监听数据的变化
computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed
如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值；在computed中，属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法。
对于Watch：
它不支持缓存，数据变化时，它就会触发相应的操作
支持异步监听
监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
当一个属性发生变化时，就需要执行相应的操作
监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数：
immediate：组件加载立即触发回调函数
deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。
当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch。
总结：
computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。
watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。
运用场景：
当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。
当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
9、v-if 和 v-for 为什么不建议一起使用
v-for和v-if不要在同一标签中使用，因为解析时先解析v-for在解析v-if。如果遇到需要同时使用时可以考虑写成计算属性的方式。
v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?
v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.
v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯)
10、Vue 2.0 响应式数据的原理 （必考）
整体思路是数据劫持 + 观察者模式
对象内部通过 defineReactive 方法，使用 Object.defineProperty 将属性进行劫持（只会劫持已存在的属性），数组则是通过重写数组来实现。当页面使用对应属性时，每个属性都拥有自己的 dep 属性，存在它所依赖的 watcher （依赖收集）get，当属性变化后会通知自己对应的 watcher 去更新（派发更新）set。
1、Object.defineProperty 数据劫持
2、使用 getter 收集依赖 ，setter 通知 watcher派发更新。
3、watcher 发布订阅模式。
11、Vue 如何检测数组变化（重要）
数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，而是选择对7种数组（push,shift,pop,splice,unshift,sort,reverse）方法进行重写（AOP 切片思想）。
所以在 Vue 中修改数组的索引和长度无法监控到。需要通过以上7种变异方法修改数组才会触发数组对应的watcher进行更新。
12、Vue3.0 用过吗？了解多少？（重要）
响应式原理的改变 Vue3.x 使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty。
组件选项声明方式 Vue3.x 使用 Composition API setup是Vue3.x新增的一个选项，他是组件内使用Composition API 的入口。
模板语法变化 slot 具名插槽语法，自定义指令v-model升级。
其他方面的更改 Suspense支持Fragment（多个根节点）和 Protal（在dom其他部分渲染组件内容）组件，针对一些特殊的场景做了处理。基于 treeShaking 优化，提供了更多的内置功能。
13、Vue3.0 和 2.0 的响应式原理区别（重要）
Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达13种拦截方法。
Vue的父子组件生命周期钩子函数执行顺序
加载渲染过程
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
子组件更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
父组件更新过程
父beforeUpdate -> 父updated
销毁过程
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
14、用index作为key可能会引发的问题（重要）
1、若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ===> 界面效果没问底，但效率低
2、如果结构中还包含输入类的DOM：会产生错误DOM更新 ===> 界面有问题
15、虚拟DOM是什么？有什么优缺点？（了解即可）
由于在浏览器中操作DOM是很昂贵的。频繁操作DOM，会产生一定性能问题。这就是虚拟Dom的产生原因。Vue2的Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。
优点：
1、保证性能下限：框架的虚拟DOM需要适配任何上层API可能产生的操作，他的一些DOM操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的DOM操作性能要好很多，因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，既保证性能的下限。
2、无需手动操作DOM：我们不需手动去操作DOM，只需要写好 View-Model的 代码逻辑，框架会根据虚拟DOM和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。
3、跨平台：虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如服务器端渲染、weex开发等等。
缺点：
1、无法进行极致优化：虽然虚拟DOM + 合理的优化，足以应对大部分应用的性能需要，但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。
2、首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。
16、v-model 原理
v-model 只是语法糖而已。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件。
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change事件；
select 字段将 value 作为 prop 并将 change 作为事件。
注意：对于需要使用输入法的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。
在普通元素上：
input v-model='sth'
input v-bind:value='sth' v-on:input='sth = $event.target.value'
17、v-for为什么要加key
如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为Vue中Vnode的唯一标识，通过这个key，我们的diff操作可以更准确、更快速。
更准确：因为带key就不是就地复用了，在sameNode函数 a.key === b.key 对比中可以避免就地复用的情况。所以更加准确。
更快速：利用key的唯一性生成map对象来获取对应节点，比遍历方式块。
18、Vue事件绑定原理 （重要）
原生事件绑定是通过 addEventListener 绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。如果要在组件上使用原生事件，需要加.native修饰符，这样就相当于在父组件中把子组件当做普通的HTML标签，然后加上原生事件。
$on、$emit 是基于发布订阅模式的，维护一个事件中心，on的时候将事件按名称存在事件中心里，称之为订阅者，然后emit将对应的事件进行发布，去执行事件中心里的对应的监听器。
19、vue-router 路由钩子函数是什么？执行顺序是什么？
路由钩子的执行流程，钩子函数种类有：全局守卫、路由守卫、组件守卫。
完整的导航解析流程：
1、导航被触发。
2、在失活的组件里调用 beforeRouterLeave 守卫。
3、调用全局的 beforeEach 守卫。
4、在重用的组件调用 beforeRouterUpdate 守卫（2.2+）。
5、在路由配置里面 beforeEnter。
6、解析异步路由组件。
7、在被激活的组件里调用 beforeRouterEnter。
8、调用全局的 beforeResolve 守卫（2.5+）。
9、导航被确认。
10、调用全局的 afterEach 钩子。
11、触发 DOM 更新。
12、调用 beforeRouterEnter 守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。
20、vue-router 动态路由是什么？有什么问题。（了解即可，什么是动态路由，什么是路由守卫）
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”（dynamic segment）来达到这个效果： const User = {
template: "
User
", };
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: "/user/:id", component: User },
],
});
问题：vue-router 组件复用导致路由参数失效怎么办？
解决方案：
1、通过watch监听路由参数再发请求
watch：{
"router":function(){
this.getData(this.$router.params.xxx)
}
}
2、用 :key来阻止复用
router-view :key="$route.fullPath"
21、谈一下对 vuex 的个人理解 （必考）
vuex 是专门为 vue 提供的全局状态管理系统，用于多个组件中数据共享、数据缓存等。（无法持久化、内部内心原理是通过创造一个全局实例 new Vue）
主要包括以下几个模块：
State:定义了应用状态的数据结构，可以在这里设置默认的初始化状态。
Getter:允许组件从Store中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation:是唯一更改 store 中状态的方法，且必须是同步函数。
Action:用于提交 mutation，而不是直接变更状态，可以包含任意异步请求。
Module:允许将单一的 Store 拆分更多个 store 且同时保存在单一的状态树中。
22、Vuex 页面刷新数据丢失怎么解决？（重要）
需要做 vuex 数据持久化，一般使用本地储存的方案来保存数据，可以自己设计存储方案，也可以使用第三方插件。
推荐使用 vuex-persist (脯肉赛斯特)插件，它是为 Vuex 持久化储存而生的一个插件。不需要你手动存取 storage，而是直接将状态保存至 cookie 或者 localStorage中。
23、Vuex 为什么要分模块并且加命名空间？ （了解）
模块： 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能会变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
命名空间： 默认情况下，模块内部的 action、mutation、getter是注册在全局命名空间的 --- 这样使得多个模块能够对同一 mutation 或 action 做出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced:true 的方式使其成为带命名的模块。当模块被注册后，他所有 getter、action、及 mutation 都会自动根据模块注册的路径调整命名。
24、使用过 Vue SSR 吗？说说 SSR （了解即可）
SSR 也就是服务端渲染，也就是将 Vue 在客户端把标签渲染成 HTML 的工作放在服务端完成，然后再把 html 直接返回给客户端。
优点：
SSR 有着更好的 SEO、并且首屏加载速度更快。
缺点：
开发条件会受限制，服务器端渲染只支持 beforeCreate 和 created 两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于 Node.js 的运行环境。
服务器会有更大的负载需求。
25、vue 中使用了哪些设计模式？
1、工厂模式 - 传入参数即可创建实例
虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode。
2、单例模式 - 整个程序有且仅有一个实例
vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉。
3、发布-订阅模式。（vue 事件机制）
4、观察者模式。（响应式数据原理）
5、装饰器模式（@装饰器的用法）
6、策略模式，策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案 - 比如选项的合并策略。
26、你都做过哪些 Vue 的性能优化？（必考）
这里只列举针对 Vue 的性能优化，整个项目的性能优化是一个大工程。
对象层级不要过深，否则性能就会差。
不需要响应式的数据不要放在 data 中（可以使用 Object.freeze() 冻结数据）
v-if 和 v-show 区分使用场景
computed 和 watch 区分场景使用
v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
防止内部泄露，组件销毁后把全局变量和时间销毁
图片懒加载
路由懒加载
异步路由
第三方插件的按需加载
适当采用 keep-alive 缓存组件
防抖、节流的运用
服务端渲染 SSR or 预渲染
27、Vue.mixin 的使用场景和原理
在日常开发中，我们经常会遇到在不同组件中经常用到一些相同或者相似的代码，这些代码的功能相对独立，可以通过vue 的 mixin 功能抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用 mergeOptions 方法进行合并，采用策略模式针对不同的属性进行合并。当组件和混入对象含有相同名选项时，这些选项将以恰当的方式进行“合并”。
28、nextTick 使用场景和原理 （必考）
nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法。
29、keep-alive 使用场景和原理（重要）
keep-alive 是 Vue 内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。
常用的两个属性 include/exclude，允许组件有条件的进行缓存。
两个生命周期 activated/deactivated，用来得知当前组件是否处理活跃状态。
keep-alive 运用了 LRU 算法，选择最近最久未使用的组件予以淘汰。
扩展补充：LRU 算法是什么？
30、Vue.set 方法原理（重要）
了解 Vue 响应式原理的同学都知道在两种情况下修改 Vue 是不会触发视图更新的。
1、在实例创建之后添加新的属性到实例上（给响应式对象新增属性）
2、直接更改数组下标来修改数组的值。
Vue.set 或者说是 $set 原理如下
因为响应式数据 我们给对象和数组本身新增了__ob__属性，代表的是 Observer 实例。当给对象新增不存在的属性，首先会把新的属性进行响应式跟踪 然后会触发对象 __ob__ 的dep收集到的 watcher 去更新，当修改数组索引时我们调用数组本身的 splice 方法去更新数组。
31、Vue.extend 作用和原理
官方解释：Vue.extend 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
其实就是一个子类构造器，是Vue组件的核心api。实现思路就是使用原型继承的方法返回了 vue 的子类，并且利用 mergeOptions 把传入组件的 options 就和父类的 options 进行了合并。
32、写过自定义指令吗？原理是什么？
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素添加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。
自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind
1、bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2、inserted：被绑定元素插入父节点时调用。
3、update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较前后的绑定值。
4、componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
5、unbind：只调用一次，指令与元素解绑时调用。
原理：
1、在生成 ast 语法树时，遇到指令会给当前元素添加 directives 属性
2、通过 genDirectives 生成指令代码
3、在 patch 前将指令的钩子提取到 cbs 中，在 patch 过程中调用对应的钩子。
4、当执行指令对应钩子函数时，调用对应指令定义方法。
33、Vue 修饰符有哪些？
事件修饰符
.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
v-model 的修饰符
.lazy 通过这个修饰符，转变为在 change 事件再同步
.number 自动将用户输入值转化为数值类型
.trim 自动过滤用户输入的收尾空格
键盘事件修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰符
.ctrl
.alt
.shift
.meta
鼠标按钮修饰符
.left
.right
.middle
34、Vue 模板编译原理 （重要）
Vue 的编译过程就是将 template 转化为 render 函数的过程，分为以下三步：
第一步是将 模板字符串转换成 element ASTs（解析器）
第二步是对 AST 进行静态节点标记，主要用来做虚拟 DOM 的渲染优化（优化器）
第三步是 使用element ASTs 生成 render 函数代码字符串（代码生成器）
35、生命周期钩子是如何实现的
Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的生命周期钩子订阅好（内部采用数组的方法存储）然后在创建组件实例的过程中会一次执行对应的钩子方法（发布）
36、函数式组件使用场景和原理 （重要）
函数式组件与普通组件的区别
1、函数式组件需要在声明组件时指定 functional:true
2、不需要实例化，所以没有this，this通过render函数的第二个参数context代替
3、没有生命周期钩子函数，不能使用计算属性，watch
4、不能通过$emit对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件
5、因为函数组件时没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement
6、函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop，而普通的组件所有未声明的属性都解析到$attrs里面，并自动挂载到组件根元素上（可以通过inheritAttrs属性禁止）
优点：1.由于函数组件不需要实例化，无状态，没有生命周期，所以渲染性要好于普通组件2.函数组件结构比较简单，代码结构更清晰
使用场景：
一个简单的展示组件，作为容器组件使用 比如 router-view 就是一个函数式组件。 “高阶组件”---用于接受一个组件为参数，返回一个被包装过的组件。
相关代码如下：
if (isTrue(Ctor.options.functional)) { // 带有functional的属性的就是函数式组件 return createFunctionalComponent(Ctor, propsData, data, context, children); } const listeners = data.on; data.on = data.nativeOn; installComponentHooks(data); // 安装组件相关钩子 （函数式组件没有调用此方法，从而性能高于普通组件）
37、能说下 vue-router 中常用的路由模式和实现原理吗？（重要）
hash 模式
1、location.has 的值实际就是 URL 中 # 后面的东西。它的特点在于：hash虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
2、可以为 hash 的改变添加监听事件
window.addEventListener("hashchange",funcRef,false)
每一次改变 hash (window.location.hash)，都会在浏览器的访问历史中增加一个记录，利用hash的以上特点，就可以实现前端路由“更新视图但不重新请求页面”的功能了
特点：兼容性好但是不美观
history 模式
利用 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
这两个方法应用于浏览器的历史记录站，在当前已有的 back、forward、go 的基础上，他们提供了对历史记录进行修改的功能。这两个方法有个共同点：当调用他们修改浏览器历史记录栈后，虽然当前 URL 改变了，但浏览器不会刷新页面，这就为单页面应用前端路由“更新视图但不重新请求页面”提供了基础
特点：虽然美观，但是刷新会出现 404 需要后端进行配置。
38、diff 算法了解吗？（了解即可）
diff算法采用同级比较。
1、tag 标签不一致直接新节点替换旧节点。
2、tag 标签一样。
先替换属性
对比子元素
新老都有子元素，采用双指针方式进行对比
sameVnode 判断tag和key完全相同为同一节点，进行节点复用
头和头相等对比
尾和尾相等对比
头和尾相等对比
sameVnode 的时候传入两个新老子节点patch(oldChild,newChild)
乱序情况 -- 上面的都不符合，先遍历旧子节点数组形成 key值映射的map对象。
然后根据新子节点数组循环 按照key值和位置关系移动以及新增节点 最后删除多余的旧子节点 如果移动旧节点同样需要patch(oldChild,newChild)
新的有子元素，老的没有子元素。-- 直接将子元素虚拟节点转化成真实节点插入即可。
新的没有子元素，老的有子元素。 -- 直接清空 innerHtml
3、无 tag 标签 -- 文本节点直接比较内容是否一致
39、双向绑定 （必考）
双向绑定可以分为三个问题？
什么是双向绑定？
双向绑定的原理？
如何实现双向绑定？
Q：什么是双向绑定？
我们先从单向绑定切入
单向绑定非常简单，就是把 Model 绑定到 View，当我们用 JavaScript 代码更新 Model 时，View 就会自动更新
双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了 View，Model 的数据也自动被更新了，这种情况就是双向绑定
当用户填写表单时，View 的状态就被更新了，如果此时可以自动更新 Model 的状态，那就相当于我们把 Model 和 View 做了双向绑定
关系图如下
Q：双向绑定的原理是什么？ （必考）
我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成
数据层（Model）：应用的数据及业务逻辑
视图层（View）：应用的展示效果，各类 UI 组件
业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来
而上面的这个分层的架构方案，可以用一个专业术语进行称呼：MVVM
这里的控制层的核心功能便是 “数据双向绑定” 。自然，我们只需弄懂它是什么，便可以进一步了解数据绑定的原理
理解 ViewModel （了解即可）
它的主要职责就是：
数据变化后更新视图
视图变化后更新数据
当然，它还有两个主要部分组成
监听器（Observer）：对所有数据的属性进行监听
解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数
Q：如何实现双向绑定
我们还是以 Vue 为例，先来看看 Vue 中的双向绑定流程是什么的
new Vue()首先执行初始化，对 data 执行响应化处理，这个过程发生 Observe 中；defineReactive 时为每⼀个 key 创建⼀个 Dep 实例
同时对模板执行编译，找到其中动态绑定的数据，从 data 中获取并初始化视图，这个过程发生在 Compile 中；初始化视图时读取某个 key，例如 name1，创建⼀个 watcher1
同时定义⼀个更新函数和 Watcher，将来对应数据变化时 Watcher 会调用更新函数
由于 data 的某个 key 在⼀个视图中可能出现多次，所以每个 key 都需要⼀个管家 Dep 来管理多个 Watcher;由于触发 name1 的 getter 方法，便将 watcher1 添加到 name1 对应的 Dep 中
将来 data 中数据⼀旦发生变化,会首先找到对应的 Dep，通知所有 Watcher 执行更新函数；当 name1 更新，setter 触发时，便可通过对应 Dep 通知其管理所有 Watcher 更新
流程图如下：
实现思路
defineReactive 时为每⼀个 key 创建⼀个 Dep 实例
初始化视图时读取某个 key，例如 name1，创建⼀个 watcher1
由于触发 name1 的 getter 方法，便将 watcher1 添加到 name1 对应的 Dep 中
当 name1 更新，setter 触发时，便可通过对应 Dep 通知其管理所有 Watcher 更新
40、slot是什么？有什么作用？原理是什么？
slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot又分三类，默认插槽，具名插槽和作用域插槽。
默认插槽：又名匿名查抄，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。
具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。
作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽。
实现原理：当子组件vm实例化时，获取到父组件传入的slot标签的内容，存放在vm.$slot中，默认插槽为vm.$slot.default，具名插槽为vm.$slot.xxx，xxx 为插槽名，当组件执行渲染函数时候，遇到slot标签，使用$slot中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。
41、对keep-alive的理解，它是如何实现的，具体缓存的是什么？
如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。
**（1）**keep-alive
keep-alive有以下三个属性：
include 字符串或正则表达式，只有名称匹配的组件会被匹配；
exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存；
max 数字，最多可以缓存多少组件实例。
注意：keep-alive 包裹动态组件时，会缓存不活动的组件实例。
主要流程
判断组件 name ，不在 include 或者在 exclude 中，直接返回 vnode，说明该组件不被缓存。
获取组件实例 key ，如果有获取实例的 key，否则重新生成。
key生成规则，cid +"∶∶"+ tag ，仅靠cid是不够的，因为相同的构造函数可以注册为不同的本地组件。
如果缓存对象内存在，则直接从缓存对象中获取组件实例给 vnode ，不存在则添加到缓存对象中。5.最大缓存数量，当缓存组件数量超过 max 值时，清除 keys 数组内第一个组件。
（2）keep-alive 的实现
const patternTypes: Array
export default {
name: 'keep-alive',
abstract: true, // 抽象组件，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
props: {
include: patternTypes, // 匹配的组件，缓存
exclude: patternTypes, // 不去匹配的组件，不缓存
max: [String, Number], // 缓存组件的最大实例数量, 由于缓存的是组件实例（vnode），数量过多的时候，会占用过多的内存，可以用max指定上限
},
created() {
// 用于初始化缓存虚拟DOM数组和vnode的key
this.cache = Object.create(null)
this.keys = []
},
destroyed() {
// 销毁缓存cache的组件实例
for (const key in this.cache) {
pruneCacheEntry(this.cache, key, this.keys)
}
},
mounted() {
// prune 削减精简[v.]
// 去监控include和exclude的改变，根据最新的include和exclude的内容，来实时削减缓存的组件的内容
this.$watch('include', (val) => {
pruneCache(this, (name) => matches(val, name))
})
this.$watch('exclude', (val) => {
pruneCache(this, (name) => !matches(val, name))
})
},
}
keep-alive 中的生命周期哪些
keep-alive是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：deactivated、activated。同时，beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁。
当组件被换掉时，会被缓存到内存中、触发 deactivated 生命周期；当组件被切回来时，再去缓存里找这个组件、触发 activated钩子函数。
42、子组件可以直接改变父组件的数据吗？（重要）
子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。如果这样做了，Vue 会在浏览器的控制台中发出警告。
Vue提倡单向数据流，即父级 props 的更新会流向子组件，但是反过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解，导致数据流混乱。如果破坏了单向数据流，当应用复杂时，debug 的成本会非常高。
只能通过 **$emit** 派发一个自定义事件，父组件接收到后，由父组件修改。
43、Vue的优点（重要）
轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
运行速度更快：相比较于 react 而言，同样是操作虚拟 dom，就性能而言， vue存在很大的优势。
44、assets和static的区别
相同点： assets 和 static 两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点
不相同点：assets 中存放的静态资源文件在项目打包时，也就是运行 npm run build时会将 assets 中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在 static 文件中跟着 index.html 一同上传至服务器。static 中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是 static 中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。
建议： 将项目中 template需要的样式文件js文件等都可以放置在 assets 中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css 等文件可以放置在 static 中，因为这些引入的第三方文件已经经过处理，不再需要处理，直接上传。
45、delete和Vue.delete删除数组的区别
delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete 直接删除了数组 改变了数组的键值。
46、vue如何监听对象或者数组某个属性的变化（重要）
当在项目中直接设置数组的某一项的值，或者直接设置对象的某个属性值，这个时候，你会发现页面并没有更新。这是因为Object.defineProperty()限制，监听不到变化。
解决方式：
this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)
this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象
调用以下几个数组的方法
splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
vue源码里缓存了array的原型链，然后重写了这几个方法，触发这几个方法的时候会observer数据，意思是使用这些方法不用再进行额外的操作，视图自动进行更新。推荐使用splice方法会比较好自定义,因为splice可以在数组的任何位置进行删除/添加操作
vm.$set 的实现原理是：
如果目标是数组，直接使用数组的 splice 方法触发相应式；
如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）
47、什么是 mixin ？
Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。
如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、 方法等，则可以将其编写为 mixin，并在组件中简单的引用它。
然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。
48、对SSR的理解
SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端
SSR的优势：
更好的SEO
首屏加载速度更快
SSR的缺点：
开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子；
当需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境；
更多的服务端负载。
49、mixin 和 mixins 区别
mixin 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的。
Vue.mixin({
beforeCreate() {
// ...逻辑
// 这种方式会影响到每个组件的 beforeCreate 钩子函数
}
})
虽然文档不建议在应用中直接使用 mixin，但是如果不滥用的话也是很有帮助的，比如可以全局混入封装好的 ajax 或者一些工具函数等等。
mixins 应该是最常使用的扩展组件的方式了。如果多个组件中有相同的业务逻辑，就可以将这些逻辑剥离出来，通过 mixins 混入代码，比如上拉下拉加载数据这种逻辑等等。
另外需要注意的是 mixins 混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并。
50、MVVM的优缺点（重要）
优点:
分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性: ⽐如视图（View）可以独⽴于Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑
提⾼可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码
⾃动更新dom: 利⽤双向绑定,数据更新后视图⾃动更新,让开发者从繁琐的⼿动dom中解放
缺点:
Bug很难被调试: 因为使⽤双向绑定的模式，当你看到界⾯异常了，有可能是你View的代码有Bug，也可能是Model的代码有问题。数据绑定使得⼀个位置的Bug被快速传递到别的位置，要定位原始出问题的地⽅就变得不那么容易了。另外，数据绑定的声明是指令式地写在View的模版当中的，这些内容是没办法去打断点debug的
⼀个⼤的模块中model也会很⼤，虽然使⽤⽅便了也很容易保证了数据的⼀致性，当时⻓期持有，不释放内存就造成了花费更多的内存
对于⼤型的图形应⽤程序，视图状态较多，ViewModel的构建和维护的成本都会⽐较⾼。
51、Vue 子组件和父组件执行顺序
加载渲染过程：
1.父组件 beforeCreate
2.父组件 created
3.父组件 beforeMount
4.子组件 beforeCreate
5.子组件 created
6.子组件 beforeMount
7.子组件 mounted
8.父组件 mounted
更新过程：
1. 父组件 beforeUpdate
2.子组件 beforeUpdate
3.子组件 updated
4.父组件 updated
销毁过程：
1. 父组件 beforeDestroy
2.子组件 beforeDestroy
3.子组件 destroyed
4.父组件 destoryed
keep-alive 中的生命周期哪些
keep-alive是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：deactivated、activated。同时，beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁。
当组件被换掉时，会被缓存到内存中、触发 deactivated 生命周期；当组件被切回来时，再去缓存里找这个组件、触发 activated钩子函数。
52、路由的Hash和History模式的区别
1.hash模式
hash模式的url会在尾巴后面带上#号，hash值的变化不会导致浏览器向服务器发出请求,不会导致重新加载页面,hash的改变的会触发hashchange时间,可以监测浏览器的前进后退。hash的传参会有体积的限制
2.history模式
history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中
需要与后端配合、后端可以拿到路由信息
有history.go()、history.back()、history.forward()、history.pushState()、history.replaceState()
hash路由 优缺点
优点
实现简单，兼容性好（兼容到ie8）
绝大多数前端框架均提供了给予hash的路由实现
不需要服务器端进行任何设置和开发
除了资源加载和ajax请求以外，不会发起其他请求
缺点
对于部分需要重定向的操作，后端无法获取hash部分内容，导致后台无法取得url中的数据，典型的例子就是微信公众号的oauth验证
服务器端无法准确跟踪前端路由信息
对于需要锚点功能的需求会与目前路由机制冲突
History(browser)路由 优缺点
优点
对于重定向过程中不会丢失url中的参数。后端可以拿到这部分数据
绝大多数前段框架均提供了browser的路由实现
后端可以准确跟踪路由信息
可以使用history.state来获取当前url对应的状态信息
缺点
兼容性不如hash路由(只兼容到IE10)
需要后端支持，每次返回html文档
53、params和query的区别
用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name 。
url地址显示：query更加类似于ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意：query刷新不会丢失query里面的数据 params刷新会丢失 params里面的数据。
54、 Vue-router 导航守卫有哪些
全局前置/钩子：beforeEach、beforeResolve、afterEach
路由独享的守卫：beforeEnter
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
55、对虚拟DOM的理解？（了解即可）
从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。
虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对 DOM的描述。它设计的最初目的，就是更好的跨平台，比如Node.js就没有DOM，如果想实现SSR，那么一个方式就是借助虚拟DOM，因为虚拟DOM本身是js对象。在代码渲染到页面之前，vue会把代码转换成一个对象（虚拟 DOM）。以对象的形式来描述真实DOM结构，最终渲染到页面。在每次数据发生变化前，虚拟DOM都会缓存一份，变化之时，现在的虚拟DOM会与缓存的虚拟DOM进行比较。在vue内部封装了diff算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。
另外现代前端框架的一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。
56、虚拟DOM的解析过程（了解即可）
虚拟DOM的解析过程：
首先对将要插入到文档中的 DOM 树结构进行分析，使用 js 对象将其表示出来，比如一个元素对象，包含 TagName、props 和 Children 这些属性。然后将这个 js 对象树给保存下来，最后再将 DOM 片段插入到文档中。
当页面的状态发生改变，需要对页面的 DOM 的结构进行调整的时候，首先根据变更的状态，重新构建起一棵对象树，然后将这棵新的对象树和旧的对象树进行比较，记录下两棵树的的差异。
最后将记录的有差异的地方应用到真正的 DOM 树中去，这样视图就更新了。
57、为什么要用虚拟DOM（了解即可）
（1）保证性能下限，在不进行手动优化的情况下，提供过得去的性能
看一下页面渲染的流程：解析HTML -> 生成DOM -> 生成 CSSOM -> Layout -> Paint ->Compiler
下面对比一下修改DOM时真实DOM操作和Virtual DOM的过程，来看一下它们重排重绘的性能消耗∶
真实DOM∶ 生成HTML字符串＋重建所有的DOM元素
虚拟DOM∶ 生成vNode+ DOMDiff＋必要的dom更新
Virtual DOM的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。尤雨溪在社区论坛中说道∶ 框架给你的保证是，你不需要手动优化的情况下，依然可以给你提供过得去的性能。
（2）跨平台
Virtual DOM本质上是JavaScript的对象，它可以很方便的跨平台操作，比如服务端渲染、uniapp等。
58、虚拟DOM真的比真实DOM性能好吗（了解即可）
首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
正如它能保证性能下限，在真实DOM操作的时候进行针对性的优化时，还是更快的。
59、DIFF算法的原理 （了解即可）
在新老虚拟DOM对比时：
首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换
如果为相同节点，进行patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
比较如果都有子节点，则进行updateChildren，判断如何对这些新老节点的子节点进行操作（diff核心）。
匹配时，找到相同的子节点，递归比较子节点
在diff中，只对同层的子节点进行比较，放弃跨级的节点比较，使得时间复杂从O(n3)降低值O(n)，也就是说，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。
60、Vue中key的作用（重要）
使用index 作为 key和没写基本上没区别，因为不管数组的顺序怎么颠倒，index 都是 0, 1, 2...这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。
61、Vue3.0有什么更新
（1）监测机制的改变
3.0 将带来基于代理 Proxy的 observer 实现，提供全语言覆盖的反应性跟踪。
消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制：
（2）只能监测属性，不能监测对象
检测属性的添加和删除；
检测数组索引和长度的变更；
支持 Map、Set、WeakMap 和 WeakSet。
（3）模板
作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。
同时，对于 render 函数的方面，vue3.0 也会进行一系列更改来方便习惯直接使用 api 来生成 vdom 。
（4）对象式的组件声明方式
vue2.x 中的组件是通过声明的方式传入一系列 option，和 TypeScript 的结合需要通过一些装饰器的方式来做，虽然能实现功能，但是比较麻烦。
3.0 修改了组件的声明方式，改成了类式的写法，这样使得和 TypeScript 的结合变得很容易
（5）其它方面的更改
支持自定义渲染器，从而使得 weex 可以通过自定义渲染器的方式来扩展，而不是直接 fork 源码来改的方式。
支持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。
基于 tree shaking 优化，提供了更多的内置功能。
62、defineProperty和proxy的区别（了解即可）
Vue 在实例初始化时遍历 data 中的所有属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。这样当追踪数据发生变化时，setter 会被自动调用。
Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
但是这样做有以下问题：
添加或删除对象的属性时，Vue 检测不到。因为添加或删除的对象没有在初始化进行响应式处理，只能通过$set 来调用Object.defineProperty()处理。
无法监控到数组下标和长度的变化。
Vue3 使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能，其作用为：用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。相对于Object.defineProperty()，其有以下特点：
Proxy 直接代理整个对象而非对象属性，这样只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性。
Proxy 可以监听数组的变化。
63、 Vue3.0 为什么要用 proxy？（了解即可）
在 Vue2 中， 0bject.defineProperty 会改变原始数据，而 Proxy 是创建对象的虚拟表示，并提供 set 、get 和 deleteProperty 等处理器，这些处理器可在访问或修改原始对象上的属性时进行拦截，有以下特点∶
不需用使用 Vue.$set 或 Vue.$delete 触发响应式。
全方位的数组变化检测，消除了Vue2 无效的边界情况。
支持 Map，Set，WeakMap 和 WeakSet。
Proxy 实现的响应式原理与 Vue2的实现原理相同，实现方式大同小异∶
get 收集依赖
Set、delete 等触发依赖
对于集合类型，就是对集合对象的方法做一层包装：原方法执行后执行依赖相关的收集或触发逻辑。