前端面试题汇总（持续更新）

整理了一些前端面试题，欢迎各位大佬指出问题，补充完善。

js部分

1.浅谈堆和栈的理解

1. 基本数据类型存储在栈中，引用类型数据存储变量在堆中，引用类型的地址存储在栈中；
2. 访问基本类型数据时直接在栈中访问，访问引用类型数据时需要先从栈中找到对应存储地址，再到堆中取数据；

2.js中数据类型的分类

1.      1.基本数据类型：number，string，undefined，null，Boolean，symbol；

     2.引用数据类型：object，Array，Function，RegExp(正则)，Date（日期）

     注：Symbol为es6新增基本数据类型，是由symbol（）函数生成的每一个都是唯一值，设计用来当做对象的属性标识符；

3.js中强制类型转换及隐式类型转换

1. 强制类型转换：number（），parseInt（），parseFloat（）
2. 隐式类型转换：+，-，*，/，==， !=,  +=,  *=,  /=,  %=

4.Undefined和null的区别

1. undefined表示无的原始值，转数值是NAN；
2. null表示为无的对象，转数值是0；
3. undefined的情况：
   1. var后没有赋值；
   2. 调用函数不传参；
   3. 对象的属性没有赋值；
   4. 函数没有返回值；
4. Null的情况：
   1. 原型链的终点；
   2. Js的DOM元素获取没获取到；
   3. 正则中的match方法没匹配到；

5.谈谈对NAN的理解：

1. Not a number表示不是一个数字；
2. 自己不等于自己；
3. 数据类型为number
4. IsNaN表示是不是一个数字

6.Javascript转为false的值：

1. ’’,   null,  undefined,  NaN

7.Null,true,false转数字：

Null  => 0     true  =>  1       false  =>   0

8.Dowhile和while的区别

都是循环，dowhile会不论条件是否成立先立即执行一次；

9.Break，continue，return的区别

1. break用于完全结束一个循环；
2. continue用于跳过某一次循环；
3. return在函数中返回函数的值，不在执行后续的代码；

10.什么是作用域链

1. 作用域相互嵌套形成了作用域链；
2. 局部可以访问全局的变量和方法；
3. 局部的方法只能在局部使用；
4. 输出变量：先在当前作用域寻找，没有的话去上级作用域，没有去全局作用域，最后没有的话报错；
5. 变量赋值：先在当前作用域中寻找，没有的话去上级作用域寻找，没有去全局作用域，最后没有就在全局定义并赋值；

11.Js的预编译

1. 将var，function的定义提升到当前作用域的最上方；
2. 提升只提升了变量和函数的定义，不会将赋值也提升

12.判断一个对象是不是一个数组的方法

1. 值.instance of Array；利用instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性，返回一个布尔值。
2. 值.isArray（）； 利用isArray方法直接判断
3. Array.prototype.isPrototypeOf(obj); 利用isPrototypeOf()方法，判定Array是不是在obj的原型链中，如果是，则返回true,否则false。

13.数组常用方法：

1. 删除：arr.pop();  arr.shift()
2. 添加：arr.push();  arr.unshift();
3. 增删改：arr.splice(开始的下标，删除的个数，要添加的元素)
4. 截取：arr.slice();
5. 合并为字符串：arr.join()；
6. 合并数组：arr.concat();
7. 遍历：arr.forEach();
8. 第一次出现的下标：arr.index of();
9. 最后一次出现的下标：arr.lastindex of();
10. 映射：arr.map();
11. 过滤： arr.filter();
12. 累加：arr.reduce();

14.字符串常用方法

1. 下标寻找指定字符：string.Char At(下标)；
2. 分割字符串为数组：string.split(‘,’);
3. 截取：string.slice(开始下标，结束下标)；
4. 截取：string.substr（开始下标，截取长度）；
5. 截取：string.substring(开始下标，结束下标)；
6. 以某个字符开头：string.startsWith();
7. 以某个字符结尾：string.endsWith();
8. 包含某个字符：string.includes()

15.值传递与引用传递的区别

值传递数据不变，引用传递会改变堆中的数据

16.数组排序的方法：

1. 数组排序方法arr.sort实现：
   1. 从小到大排序
   2. 从大到小排序

                  

• 冒泡排序：

• 选择排序：

• 快速排序：

17.什么是es5，usestrict是什么，目的是什么？

1. ECMA2009年的第五次改版；
2. Usestrict表示严格模式；
3. 严格模式的作用：
   1. 增加报错场合，保证代码运行安全；
   2. 提高编译器效率，增加运行速度；
   3. 为之后的版本做铺垫

18.字符转阿斯克码，阿斯克码转字符串

1. 字转码：charCodeAt（）；
2. 码转字：string.from CharCode（）；

19.url的组成

1. 协议：http/https
2. Ip、域名
3. 端口
4. 虚拟目录
5. 文件名
6. 参数
7. 锚点

20.什么是浏览器缓存

优化加载速度，浏览器在用户磁盘上对请求过的文档进行存储，从而加快下一次的访问速度；

21.打印当前浏览器的版本信息

1. 用户信息：navigator.userAgent；
2. 浏览器名：navigator.appName；
3. 内核：navigator.appcodeName；
4. 版本：navigator.appversion；

22.地址栏输入内容并按下回车后经历了什么？

1. 域名解析为ip；
2. Ip发送到网络供应商去寻找对应服务器；
3. TCP三次握手建立连接；
4. 开始发送请求；
5. 服务器接收请求并做出响应；
6. 服务器响应出页面；
7. TCP四次挥手，断开连接；
8. 浏览器进行页面的渲染；
9. 浏览器将图片，js等重新发送请求；

23.浅谈关于文档碎片的理解

1. Let fragment = document.createDocumenFragment();
2. 为减少DOM操作中性能的消耗，可以创建一个文档碎片；
3. 每一次的DOM操作可以添加到文档碎片中，再将文档碎片添加到需要插入的位置，从而减少DOM操作，提升性能；
4. 每次DOM操作都会发生重排

24.回流和重绘

1. 页面显示的阶段：生成DOM树和CSS树，根据节点集合属性生成render树，在render树的基础上渲染颜色背景等；
2. 引起回流：
   1. 一面第一次渲染；
   2. 添加或删除课件DOM元素；
   3. 元素位置发生改变；
   4. 元素尺寸发生改变；
   5. 内容发生改变；
3. 重绘：发生回流后必定会发生重绘，浏览器会重新绘制受影响的元素；
4. 减少回流：
   1. 尽量一次定好style属性，避免逐项更改；
   2. 避免循环DOM操作，尽量使用文档碎片；
   3. 将复杂的元素绝对或固定定位，使之脱离文档流；

25.关于onkeydown和onkeypress的区别，及如何获取按下的键盘码

1. onkeydown
   1. 只支持大写字符；
   2. 可以识别功能键
2. Onkepress
   1. 大小写都支持；
   2. 不识别功能键；
   3. 组合键ctrl+回车的code是10

26.什么是事件流，什么是事件冒泡，什么是事件捕获

1．事件流：当元素绑定了事件，该事件会在元素节点与根节点之间的路径传播，经过的节点都会收到该事件，经过这个过程叫做DOM事件流；

2．事件冒泡：微软提出的事件由子元素传递到父元素的过程；

3. 事件捕获：网景提出的事件由父元素到子元素传递的过程；

27.对事件监听的理解

1. 事件分为DOM0级事件（普通事件绑定）和DOM2级事件（事件侦听绑定）
2. 事件侦听绑定方法：addEventListener（）=>  removeEventListener
3. 入参：
   1. 具体事件（不带on的）
   2. 处理函数
   3. 在捕获阶段还是冒泡阶段执行，默认false在冒泡阶段执行

28.Ie与火狐事件机制的区别

1. ie：事件冒泡机制；
2. 火狐：事件冒泡和事件捕获

29.事件代理（事件委托）

利用事件冒泡原理，将子元素的事件委托给父元素去监听，当子元素触发事件时，事件冒泡到父级，如果希望指定子元素触发，可以通过事件对象event获得事件源target进而进行判断；

好处：

1. 减少绑定，提高性能；
2. 实现对未来元素事件的绑定；

30.什么是cookie

1. 回话跟踪技术，用于存储用户在本地终端的数据；
2. 特点：
   1. 大小不超过4k；
   2. 每个域名不超过50个
   3. 可设置有效期，过期后会自动删除；
   4. 只能访问同域名下的cookie
   5. Cookie只能是字符串
3. Localstorage：
   1. 除非清除，否则永久保存；
   2. 大小在5mb左右
   3. 仅存在客户端保存，不参与服务器通信
4. Sessionstorage：
   1. 仅在当前会话有效，关闭页面就会清除；
   2. 大小在5mb左右；
   3. 仅在客户端保存，不参与服务器通信

31.什么是高内聚低耦合

耦合性：各个模块之间的联系程度，在面向对象中模块是相对独立的，因此耦合性越低越好；

内聚性：模块内部各个元素之间的联系程度，联系越紧密，内聚度越高

32.面向对象的好处

1. 开发时间短，效率高，可靠性高；
2. 面向对象编程的重复利用率高，可大量采用成熟的类库，缩短开发时间；
3. 应用程序更易于维护，更新和升级，继承和封装使得应用程序的修改产生的影响更加局部化；

33.Prototype的作用

1. 节约内存（给原型定义方法只会占用一次内存）；
2. 扩展属性和方法
3. 可以实现类的继承

34.请简述prototype，__proto__和constructor三者的关系

1. prototype：每一个函数都有一个prototype属性，这个属性指向一个对象，这个对象叫做原型对象；
2. __proto__：
   1. 每个对象都有一个__proto__属性
   2. __proto__指向创建自己的那个构造函数的原型对象
   3. 对象可以直接访问__proto__里面的属性和方法
3. Constructor：指向创建自己的那个构造函数；
4. 总结：
   1. 当创建一个构造函数时，函数自带prototype属性，可用于存放公共的属性和方法，prototype属性指向一个对象，即原型对象；
   2. 原型对象里面有一个constructor构造器，用于创建自己的构造函数
   3. 当实例化一个对象的时候，对象自带一个__proto__属性，此属性指向创建自己的构造函数的原型对象，可以使用这个原型的属性和方法；

35.在执行new的过程中，js执行了哪些操作；

1. 创建了一个空的js对象；
2. 将空对象的原型prototype指向构造函数的原型；
3. 把this指向当前对象

36.请写出继承的方式

1. 原型继承：直接把prototype改成有属性和方法的prototype；
2. 借用继承：要借用的函数调用，并改this
3. 原型和借用的混合继承；
4. Es6类的继承：

37.请说出call，apply，bind的区别

1. bind方法：在调用bind方法时赋值一个函数，并改掉其this指向，不会被立即调用；var 新函数 = 原函数.bind（改掉后的this）
2. call和apply绑定完this的指向会立即调用；
3. call和apply的区别：
   1. call(this指向，传入的参数…)
   2. apply(this指向，数组)

38.Get与post的区别

1. post是通过http post机制，用户看不到这个过程，如果想要看到数据可以通过控制台的network中的formdata中进行查看；
2. get进行数据请求的时候会将传递的参数信息通过url进行传递，在地址的？后面按照键=值&键=值的方式来表示；
3. get传递较小，不大于2kb，post传递数据量较大默认不受限制；
4. get安全性非常低，post相对于get安全性较高，二者的安全性取决于是http还是https协议；
5. get执行效率比post的方法好；

39.ajax请求数据的流程

1. 创建通信对象：var xhr = new XMLHttpRequest();
2. 建立链接：xhr.open(方式，地址，是否异步)
3. 发送请求：xhr.send();
4. 利用onreadystatechange事件监听服务器返回状态；

40.同源策略

1. 同协议，同域名，同端口；
2. 同源策略规定了js代码的访问权限，只能访问自己同源的页面；
3. 同源策略是一种约定，它是浏览器最核心也是最基本的安全功能；

41.什么是跨域，如何解决跨域jsonp的原理

1. 受浏览器同源策略的限制，不同域的页面相互访问就要进行跨域；
2. 跨域方式：
   1. 服务器代理
   2. Jsonp请求
   3. 后端支持的cors
   4. Nginx代理
3. Jsonp的原理是利用浏览器的漏洞，src不受同源策略的影响，可以请求任何链接，动态创建script标签，将实现写好的函数名传给服务器，供服务器使用；

42.什么是jsonp？jsonp跨域的流程

1. Jsonp是一种非正式传输协议，用于解决跨域问题；
2. 流程：
   1. 创建全局函数
   2. 创建一个script标签；
   3. 给script添加src
   4. 给src添加回调函数test（callback=test）callback是传给后端的一个参数
   5. 将script放到页面上
   6. Script请求完成，将自己从页面上删除；

43.什么是闭包？用途？注意的地方？

1. 打破了作用域链的规则，利用作用域嵌套，形成执行空间不被销毁的现象；
2. 用途：可以读取函数内部的局部变量，让这些变量始终保持在内存当中；
3. 注意：由于闭包会是的函数中的变量都被保存在内存当中，内存消耗会很大，所以不能滥用闭包，否则会影响网页的性能；

44.Jquery中attr与prop的区别

1. attr是通过setAttribute和getAttribute来设置的使用的是DOM属性节点；
2. prop是通过documen.getElementId()[name=vale]来实现的，通常用来设置checked，selected等；

45.window.onload,window.onresize,window.onscroll,$(document).ready(function(){})四者的区别

1. window.onload:当文档加载完毕后包括html，js，img，css
2. window.onresize:当窗口发送改变的时候，高斌率触发事件；
3. window.onscroll:当滚动条滚动的时候，高频率触发事件；
4. $(document).ready(function(){})当页面加载完毕以后，不包括img；

46.Jquery中width（），innerwidth（），outerwidth的区别

1. width（）：只会获取content内容区的宽度；
2. innerwidth（）：会获取content+padding的宽度；
3. outerwidth（）：会获取content+padding+border的宽度

47.jquery中offset（），position（），scrolltop的作用

1. offset（）：获取当前元素距离页面之间的偏移量；
2. position（）：获取当前元素距离以定位的父元素的偏移量；
3. scrollTop（）：获取滚动条滚动过的距离；

48.模块化开发的优点

1. 解决文件之间的依赖关系；
2. 避免命名冲突，解决全局变量及全局函数泛用的现象；
3. 减少代码的复杂性；
4. 按需加载

49.常用的模块化的方案有哪些

服务端：如node.js

客户端：如require，sea.js

Es6：module（export import）

50.什么是require.js作用是什么？什么是AMD

1. Require.js是一个javascript文件或者模块化的加载器，他可以提高javascript文件的加载速度，避免不必要的堵塞；
2. Require.js的作用：
   1. 实现js的异步加载；
   2. 管理模块之间的依赖关系，便于diamante的编写和维护；
3. AMD是一种定义和加载模块的规则，使模块和它的依赖可以被异步的加载，但又按照正确的顺序；

51.AMD和CMD的区别

CMD是懒执行；

AMD是预执行；

52.什么是css预处理器，优点是什么？

1. css预处理器用一种专门的编程语言进行web页面样式设计，然后再编译成正常的css文件，以供项目使用；
2. 在css中使用变量，简单的逻辑程序，函数，可以让css更加简洁，适应性更强，可读性更佳，更易于代码的维护；

53.Eval是做什么的

1. 他的功能是把对应的字符串解析成js代码并运行
2. 应该避免eval的使用，不安全非常消耗性能；

54.谈谈this对象的理解

1. this是js的一个关键字，随着函数使用的场合不同，this代表的值也不同；
2. 保持一个原则：this指的是调用函数的那个对象；
3. This一般情况下是全局对象，作为方法调用，那么this就是指这个对象
4. This在不同情况下代表的值：
   1. 在全局中：window；
   2. 在对象方法中：对象
   3. 在普通函数中：window；
   4. 在自调用函数中：window；
   5. 在事件函数中：事件源；
   6. 定时器中：window；
   7. 箭头函数中：箭头函数代码上一行代码中的this指向

2.vue部分

1.MVVM的理解

1. module代表数据模型，可以在module中定义数据修改和操作；
2. view代表ui组件，负责将数据模型转化成ui展现出来；
3. viewmodule将module和view通过双向数据绑定进行了关联，使得两者的变化都会立即反应到对方身上；

2.this的典型应用

1. 构造函数的属性
2. 在事件中使用事件源可以使用this
3. Call，apply，bind修改this指向

3.V-if与v-show的区别

1．.v-show：操作的是元素的display属性

2．v-if操作的是元素的创建和插入；

3．v-if有更高的切换开销，而v-show有更高的初始化渲染开销；

4．频繁切换使用v-show好，运行条件很少改变使用v-if比较好；

5．使用场景：

v-show：前台数据的展示；

v-if: 管理系统权限列表的展示

4.Methods，computed，watch三者的区别

1. 共同点：
   1. Methods，watch，computed都是以函数为基础的；
   2. Computed与watch都是以vue的依赖为基础，当所依赖的数据发生变化的时候，会触发相关的函数去实现数据的变动；
   3. Methods里面是用来定义函数的，需要手动才能执行，不像computed与watch是自动执行的函数；
2. 三者的不同点：
   1. Computed是一个计算属性，computed所以依赖的属性发生变化时，计算属性才会重新计算，并进行缓存，当其他数据发生改变的时候，computed属性不会重新计算，从而提升性能；
   2. Watch类似事件监听+事件机制；
   3. Watch的方法默认是不会执行的，只有依赖的属性发生变化才会执行；
   4. Watch默认第一次是不会执行的，通过声明immediate为true，可立即执行一次；
   5. Watch中dhandler默认只能监听属性引用的变化，但内部属性是监听不到的，设置deep为true可以进行深度监听，但是性能开销也会变大；
   6. Watch无法监听数组值（特殊情况下）的变化；
3. 使用场景：
   1. Watch：一个数据影响多个数据；例如：网络请求模糊查询浏览器自适应监控路由对象；
   2. Computed：一个数据受多个数据的影响；例如：商品购物车的计算过滤某些商品数据

5.Vue的指令

1. 加内容：v-text；
2. 加带标签的内容：v-html；
3. 防止闪烁：v-cloak；
4. 不进行解析：v-pre；
5. 只双向绑定一次：v-once；
6. 修饰属性：v-bind，简写：
7. 绑定事件：v-on，简写@事件=‘函数名’；
8. 遍历：v-for；
9. 分支语句：v-if；v-else-if；v-else；
10. 元素显示隐藏：v-show；
11. 表单元素的绑定：v-model
12. 自定义：
    1. 局部：directives：{指令名:function(){}};
    2. 全局：vue.directive(指令名,{bind:function(){}})
    3. 表示第一次：bind
    4. 插入父节点：inserted；
    5. 数据更新：update；
    6. 指定元素节点更新完：compontUpdated；
    7. 取消绑定后触发：unbind

6.修饰符

1. 阻止事件冒泡：.stop;
2. 阻止默认行为：.prevent
3. 绑定指定键的键盘事件：.键盘码/.键盘名
4. 表单数据去前后空格：.trim;
5. 表单数据获取转为数字：.number;
6. 使用oninput事件转成onchange事件：.lazy；
7. 自定义修饰符：vue.config.keyCode.名字=键盘码；

7.为何v-for要用key

快速查找到节点，减少渲染次数，提升渲染性能

8.Vue的生命周期钩子函数

Vue2：

1. 1. 1. beforecreat（）：
         1. 创建vue实例对象；
         2. 观测数据，初始化默认函数和事件
         3. 初始化data数据和methods
      2. Created（）
         1. 在内存中渲染DOM模板
      3. beforeMount（）
         1. 将编译好的目标替换到浏览器的页面去
      4. Mounted（）
      5. Beforeupdate（）
         1. 根据data中的新数据在内存中渲染新的DOM树
         2. 把最新的DOM树重新渲染到页面上
      6. Updated（）
      7. beforeDestory（）
         1. 准备销毁vue实例
         2. 销毁vue实例
      8. Destroyed（）

9.数据双向绑定实现原理：v-model

1．核心是通过object.defineProperty()实现属性劫持，监听数据变动；

2．Input对data的更新是通过给input增加ininput事件实现的；

1. Data对input实现更新是由于调用方法可默认获取e事件，e.target.value赋值给data，就实现了双向数据绑定了；

10.数据双向绑定的实现原理：vue

1. 核心通过object.defineProperty()+订阅者模式的方式来实现；
2. 实现一个监听器（server），用来劫持并监听所有属性，如果有变动，就通知订阅者；
3. 实现一个订阅者（watcher）每一个watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图；
4. 实现一个解析器（compile）可以解析和扫描每个节点的相关指令v-model，v-on等指令，如果节点存在v-model，v-on等指令，则解析器compile初始化这类节点的模板数据，使之可以显示在视图上然后初始化响应的订阅者watcher

11.Computed有何特性

缓存，data不变不会重新计算，提高性能

12.Ajax请求应该放在哪个生命周期

可以放在created和mounted中，但是一般放在created中

13.Es6语法

1. 箭头函数；
2. Let，const用法
3. Class类；
4. 结构语法；
5. 模板字符串；
6. Promise用法

14.描述组件渲染和更新的过程

1.vue组件初次渲染：解析模板为render函数，触发响应式监听data属性的getter和setter执行render函数，生成vnode.patch（节点）

2.vue组件更新的过程：修改data，触发setter，重新执行render函数，生成vnode.patch（新节点）

15.Vue中如何封装组件，什么是组件，为什么要封装，组件中data为什么是一个函数

1. 如何封装：

1.在components文件夹中新建一个vue文件；

2.在main.js中全局引入，先import在注册到vue中；

3.在任意页面通过自定义标签使用自定义组件；

2. 为什么封装：主要为了解耦，提高代码复用率；

3. 什么是组件：

1. 页面上可以复用的都称之为组件，它是由html，cssjs组成的聚合体；

2. 组件就相当于库，把一些能在项目里或不同项目里可以复用的代码进行需求性的封装；

4. 组件的data为什么是一个函数：保证组件调用data返回一个全新的对象，不会因为其它实例中的data的改变而改变；

16.多个组件有相同逻辑如何进行抽离

使用mixin对公共部分的逻辑进行抽离

17.何时要使用异步组件

加载大组件，路由异步加载

18..何时使用keep-alive

缓存组件不需要重复渲染，多个静态tab页切换，优化性能；

19.Vue中常见性能优化的方式

1. 避免响应所有数据：不要将所有的数据都放到data中，data中的数据都会增加getter和setter，并且会收集watcher，这样还占内存，不需要响应式的数据我们可以直接定义在实例上；
2. 使用函数式组件：不包含状态和实例的组件，组件不支持响应式，并且不能通过this关键字引用自己，应用场景：简单的组件展示；
3. v-for添加key且避免同时使用v-if：方便vue.js内部机制精准找到该列表数据，v-if没有v-for优先级高，如果每一次都要遍历整个数组，会影响速度；
4. 合理使用v-if和v-for；
5. 长列表性能优化：对于展示的大量不需要改动的数据不需要进行数据劫持的，可以通过object.freeze方法来冻结一个对象，一旦被冻结的对象就不能改了；
6. 路由懒加载：避免一次性加载单页面应用的所有组件出现白屏的现象；

使用keep-alive缓存组件；

20.vue组件创建的方式

1. 使用vue.extend来创建全局的vue组件；
2. 直接使用vue.component创建；
3. 在被控制的#app外面，使用template元素定义组价的html模板结构

21.如何实现多个路由共用一个页面组件

1. 在router-view里添加key控制，弊端：router-view里包含其他组件，切换其他组件会让其他组件也重新渲染，这样的问题是会导致切换路由会闪烁一下，因为切换后所有的钩子函数都重新触发了；
2. 通过监听路由的方法来重新触发钩子函数；

22.vue不能监听数组或对象的原因及处理

出现的情况：

1. 1. 1. 利用索引（下标）改变数组时
      2. 修改数组长度时
      3. 对象发生改变

解决方法：

1写为this.$set(操作的数据，下标，新值)

2修改长度改用数组截取方法this.arr.splice(0,1)

3侦听对象改为this.$set(操作的对象，键，值)

23.给响应式对象添加一个属性，如何删除响应式对象中的属性

1.添加一个属性：vue.set(对象，键，值)；

2.删除一个属性：vue.delete(对象，键)

24.Vue中的过滤器如何使用

1. Vue.filter(要过滤的数据，过滤器传递的数据)
2. 使用：

模板中 {{要过滤的数据 | 处理函数}}

js中 filters:{处理函数（val）{}}

25.vue组件通讯的方式

1.父传子：

1. 1. 在父组件中使用子组件自定义标签
   2. 给标签添加自定义属
   3. 在子组件中使用props：[‘自定义属性’]接收
   4. 子组件就可以像使用data中的数据一样使用prop中的数据了

2.子传父：

1. 1. 在父组件中使用子组件，并自定义事件；
   2. 通过$emit触发自定义事件并传值；
   3. 父组件绑定监听器获取到子组件传递过来的参数

3.ref子传父：

1. 1. 在父组件中使用子组件并设置ref；
   2. 在父组件中可以通过this.$refs.自定义名获取到子组件实例

4.事件总线eventbus进行非父子传值：

1. 1. 创建一个事件总线eventbus；
   2. 兄弟组件通过$emit触发自定义事件并传值
   3. 另一个兄弟组件通过给this.$bus.$on绑定自定义事件；
   4. 通过事件侦听获取到传递过来的值

5.通过vuex存放公共数据实现数据传递接收

1. 1. 访问vuex中的数据：{{$store.state.数据名}}
   2. 调用state中的方法：$store.commit(调用的方法，传入的参数)

26.vue中单项数据流的理解

数据从父组件传递给子组件只能单向绑定，子组件不能直接修改父级传递过来的数据，数据只能从一个方向来修改状态，如果父组件给多个子组件进行了数据传递，那么某个子组件中修改了这个数据也会导致其他组件中的数据发生改变；

27.为什么在组件内部data是一个函数而不是一个对象

因为每次调用组件的时候都会重新生成一个对象，如果是一个对象的情况下，data数据会进行复用（因为对象是引用类型的数据），而当data是一个函数的时候每次调用的时候就会返回一个新的对象；

28.动态组件及其使用，keep-alive的作用

1. 多个组件使用同一个挂载点，并动态切换；
2. 用法：<component :is=’要展示的组件’></compoent>
3. keep-alive包裹的组件会缓存不活动的组件实例而不是销毁；
4. keep-alive常用属性：
   1. 1. 1. include：字符或正则表达式； 表示匹配的才缓存
         2. exclude：字符串或正则表达式； 任何都不缓存
         3. max：数字； 最多可以缓存多少组件实例

29.使用keep-alive内置组件后会增加哪两个生命周期函数

1. actived：当组件为活跃状态时触发；

1. deactived：缓存状态的时候触发

30.vue中slot的使用方法，以及slot作用域插槽的用法

1.当组件当做标签使用的时候，如果需要在组件标签内部进行嵌套内容的时候，需要通过template组件包裹嵌套的内容，在组件内部通过<slot></slot>进行接收；

2.slot作用域插槽可以实现子组件给父组件传递数据

1. 1. 定义子组件，并绑定代表传递的数据的属性；
   2. 在插槽中，用slot-scope属性接收数据；
   3. 在需要使用数据的容器中，使用data。数据名去使用数据

31.怪异盒模型

通过设置box-sizing设置怪异盒模型

1.content-box：默认值，border，padding不算到width范围内；

2.border-box：border和padding规划到width范围内；

3.padding-box：将padding算进width范围内

32.vue中动画的实现

1.哪个元素需要动画就给哪个元素包裹transition标签

2.进入标签：自定义-enter；自定义-enter-active；自定义-enter-to；

3.离开标签：自定义-leave；自定义-leave-active；自定义-leave-to；

4.如果一组元素要动画，使用标签<transition-group></transitin-group>

33.父子组件的生命周期

34.指定el与不指定el，指定template与不指定template的区别

1. 当指定了el就会渲染el的模板；
2. 当没有指定el时，会自动通过vm$mount(el)指定el
3. 当没有指定tempalte时渲染el模板；
4. 当指定了template模板后el会被整体替换；

35.浅谈堆路由的理解

1.什么是路由：根据不同的url地址展示不同的页面或者数据；

2.前端路由多用于单页面开发；

3.前端路由是不涉及到服务器的，是前端利用hash或者html5的historyAPI来实现的，一般用于不用的内容展示和切换；

36.路由跳转的方式

1.声明式导航：a标签进行跳转；router-link

2.编程式导航：

1. 1. This.$router.push(路径)；
   2. This.$router.push（{path：路径，query：{数据}}）
   3. This.$router.push（{name：名称，params：{数据}}）
   4. This.$router.back（）
   5. This.$router.go（）
   6. This.$router.replace（）
   7. This.$router.forward）（）

37.$route和$router的区别

1.$route是路由信息对象，包括path，params，hash，query，fullpath，matched，name等路由信息参数；

2.$router是路由实例对象，包括了路由的跳转方法，钩子函数等

38.请说出路由配置项常用的属性及作用

path：跳转路径

component：路径相对的组件

name：命名路由

meta：路由元信息

children：子路由的配置参数

props：路由解耦

redirect：路由重定向

39.var，let，const的区别

var：

1. 1. var是es6出现之前使用的变量声明语法
   2. var变量可以重新声明和修改
   3. var会有变量提升，变量的声明和函数的定义会移至当前作用域最上方；

let：

1. 1. let是块级作用域；
   2. let可以被修改，但是不能被重新声明；

const：

1. 1. 声明的变量在块级作用域内；
   2. 不能被修改并且不能被重新声明

40.axios的特点有哪些

1.axios是一个基于promise的http库，支持promise所有的api

2.可以拦截请求和响应

3.可以转换请求数据和响应数据，并对响应回的内容自动转换成json类型的数据；

4.安全性更高，客户端支持防御xsrf；

41.axios有哪些常用方法

1.get请求用于列表和信息查询：axios.get(url,[config])；

2.删除：axios.delete(url,[config])

3.post请求用于信息的添加：axios.post(url,[data,[config]])

4.更新操作：axios.put(url,[data[config]])

42.说一下你了解的axios相关配置属性

1. url：用于请求的服务器url；
2. methods：创建请求时使用的方法，默认是get；
3. baseURL：将自动加载url前面，除非url是一个绝对url，它可以通过设置一个baseURL便于axiso实例的方法传递相对URL；
4. transformRequest：允许在向服务器发送前，修改请求数据，只能用在put，post，patch这几个方法
5. headers：即将被发送的自定义请求头；
6. params：即将与请求一起发送的url参数，必须是一个无格式对象或URLsearchParams对象；

43.前端路由和后端路由的区别

路由：根据不同的url地址展示不同的内容或页面；

前端路由：

1. 1. 页面不刷新，利用锚点路由跳转到不同的url，实现单页面应用；
   2. 只变换了路径，没有了网络延迟；
   3. 解决了ajax请求后页面无路径变化的问题；

后端路由：

1. 1. 每跳转到不同的url都是一次重新访问；
   2. 会有网络延迟的问题；

44.前端渲染和后端渲染的优缺点

前端渲染优点：

1. 1. 前后端分离，使得前端有更多的选择性；
   2. 体验更好，如做成spa，尤其是移动端，使体验更接近原生app

前端渲染缺点

1. 1. 响应较慢，存在字符串拼接过程；
   2. 不利于SEO，目前百度，谷歌的爬虫对于SPA都是不认的

后端渲染优点：

1. 1. 前端耗时少，减少了首屏时间；
   2. 有完整的HTML页面，有利于SEO；
   3. 无需占用客户端资源，只需解析标准html

后端渲染缺点

1. 1. 不利于前后端分离，开发效率低；
   2. 占用服务器资源

45.Vue.js的template编译的理解

1.通过complice编译器把template编译成AST语法树；

2.AST经过generate得到render函数，render的返回值是vnode，vnode是vue的虚拟DOM节点；

46.vue-router实现的原理

1.hash：通过改变hash值；

2.history：利用history对象新特性

47.vue.nextTick的理解

用法：this。$nextTick（function（）{}）

定义：在下次DOM更新循环结束后，执行延迟回调，在修改数据之后立即使用这个方法获取更新后的DOM

应用场景：

1. 1. 在created（）钩子函数想进行DOM操作；
   2. 改变DOM元素的数据后，基于新的DOM做点什么；
   3. 使用三方插件时，希望在vue生成的某些dom动态发生改变时重新应用该插件

48.前端的深拷贝和浅拷贝

应用场景：在使用vue时从一个组件给另一个组件传递数据时，无需将所有的数据传递过去，并且不能操作原数据，此时就涉及到了深浅拷贝；

浅拷贝：

1. 1. Object.assign（{}，原对象）
   2. 利用数组方法arr.concat（）；arr.slice（）

深拷贝：

1. 1. 利用json数据和json字符串之间的转化；
   2. 利用递归遍历对象或数组

49.如何重定向路由，如何实现路由解耦

1.通过配置路由项中的redirect进行重定向；

2.在路由的配置项中设置props：true，在需要接受组件内部通过props接收

50.对虚拟DOM的理解

1.什么是虚拟DOM：本质是存储在内存中的，js和DOM之间的一个映射缓存，在形态上是一个能够描述DOM结构及其属性信息的js对象；

2.解决的问题：

1. 1. 为数据驱动视图思想提供了高度可用的载体，使得前端开发能够基于函数式ui的编程方式实现高效的声明式编程；
   2. 解决了跨平台的问题，实现了一次编码，多端运行；

51.forEach，for of，for in的区别

forEach：对数据组的每一个元素执行一次提供的函数，不改变原数组；

for in：遍历的值是数据结构的键值，适用于遍历对象；

for of：用来循环获取一对键值对中的值，更适用于遍历数组

52.vuex数据传递流程

1. 通过new vuex.store（）创建仓库，state是公共的状态；
2. 组件通过this.$store.state属性调用state中的数据；
3. Ths.$store.dispatch触发actions中的方法
4. actions中的每个对象都有commit方法来触发mutations中的方法
5. mutations可以修改state中的数据，参数为state和传递的数据
6. state数据改变，组件视图发生改变

53.请说一下vue-loader的理解

解析和转换vue文件，提取其中的逻辑代码script，样式代码style，以及html模板template，再分别把他们交给对应的loader去处理

54.请说一下vue.extend的理解

使用vue构造器，创建一个子类，参数是一个组件对象，注意data必须是一个函数，vue.extend（）返回的是一个扩展实例构造器，简单来说就是一个预设了部分选项的vue实例，主要用来服务vue.component来生成组件；

55.请说一下对vue.use的理解

安装vue.js插件如果插件是一个对象，必须提供install方法，如果插件是一个函数，它会被作为install方法；

install方法调用时会将vue作为参数传入；

install方法要在调用newvue之前被调用；

56.Vue2升级vue3不再使用object.defineproperty的原因

1.无法监听es6的Set，Map变化；

2.无法监听class类型的数据；

3.属性的新加或者删除也无法监听；

4.数组元素的增加和删除也无法监听；

57.Promise的理解：

1. promise不是回调，是一个内置函数，需要程序员自己进行调用；
2. new promise的时候需要传入一个回调函数，他是一个同步函数，会立即在主线程上执行，他被称为executor函数；
3. 每一个promise实例都有3中状态，分别为：初始化pending，成功fulfilled，失败rejected
4. 每一个promise实例在刚被new出来的那一刻，状态都是pending
5. Executor函数会接收到两个参数，他们都是函数，分别用形参：resolve、reject接收
   1. 调用resolve函数，会让promise实例变为成功状态fulfilled，同时可以指定成功的value；
   2. 调用reject函数，会让promise实例变为成功状态rejected，同时可以指定成功的reason；
6. Promise实例对象上的Prototype上有：
   1. .then方法：会返回一个新的promise实例对象 接收两个参数第一个处理成功的回调，第二个处理失败的回调；

.catch方法：相当于.then的语法糖，只接收失败的回调；