2020面试汇总

0729

1、为啥从上家公司离职？

答：因人而异。

2、js基本数据类型有哪些？

答：五种基本数据类型--string、number、null、undefined、Boolean

　　一种复杂数据类型--Object

3、vue 计算属性和监听属性区别？

答：计算属性computed，自动监听依赖值的变化，动态返回内容；

　　可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性；具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。

　　监听属性watch，一个过程，在监听值变化时，可以触发回调。

　　watch用于观察和监听页面上的vue实例，当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，那么watch为最佳选择

　　区别：用法上，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用 watch。

4、举例子说明watch监听实际应用场景

答：1）监听路由变化

　　例：watch: {

　　　　$route: function () {

　　　　　　// 监听值变化后逻辑

　　　　}

　　}

　　2）监听项目唯一标识key的变化

　　例：appkey贯穿整个项目查询数据，在初始页对appkey进行监听，如果appkey变化，刷新页面数据

　　appkey: {

　　　　handler: function(val, oldval) {

　　　　　　// 监听值变化后逻辑

　　　　}

　　}

5、watch 里面 deep 属性原理

答：对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true

注意：只要对象的属性发生变化，就会执行handler函数；如果将监听对象中的具体属性，则可以通过计算属性computed作为中间层进行监听

使用immediate:true，会在初始化watch时就立即执行handler回调函数，而不用等下一次数据更新。

使用deep:true，才会递归监听对象的属性（如果监听的是对象或数组）。

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler

优化，我们可以是使用字符串形式监听。

6、除了watch监听路由变化，还有什么方法可以监听到？

https://www.cnblogs.com/crazycode2/p/8727410.html

答：可以使用路由守卫钩子函数监听路由变化。

（拓展）路由守卫函数有哪些？

https://www.cnblogs.com/dengyao-blogs/p/11576614.html

答：1）概念：路由守卫有点类似于ajax的请求拦截器，就是请求发送之前先给你拦截住做一些事情之后再去发送请求，同样这里的路由守卫意思差不多；简单理解为就是你在进路由之前，首先把你拦住，对你进行检查。

　　2）vue-router钩子函数分三大类：

　　　  a、全局钩子函数：[ main.js里面 ]

　　　  　  -- beforeEach(to，from，next)：一般用于控制权限；例如：登录页、用户达到什么级别跳页面...

                  -- afterEach(to，from)：一般用来重置页面滚动条位置

　　　  b、路由独享钩子函数： [ 路由配置文件，单个路由配置 ]

　　　　　-- beforeEnter(to，from，next)：只能设置改变前的钩子，不能设置改变后的钩子

　　　  c、组件内钩子函数：[ 组件内export default{} ]

　　　　　-- beforeRouterEnter(to，from，next)：路由进入前调用，vue实例还没创建，不存在this

　　　　　-- beforeRouterUpdate(to，from，next)：路由修改时调用，可以访问实例

　　　　　-- beforeRouterLeave(to，from，next)：路由离开时调用，可以访问实例

7、实际项目中遇到问题怎么解决？

答：1）技术问题，如果能用插件解决，优先插件解决；

　　2）业务逻辑上的问题，多找产品交流沟通，透彻了解需求；

　　3）也可以尝试找同事一起讨论如何实现。

8、fetch、axios有什么区别？

https://www.jianshu.com/p/8bc48f8fde75

答：传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。

　　-- JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。经过多年的更新维护，真的已经是非常的方便了，优点无需多言；如果是硬要举出几个缺点，那可能只有：

　　　** 本身是针对MVC的编程,不符合现在前端MVVM的浪潮

　　　** 基于原生的XHR开发，XHR本身的架构不清晰

　　   ** JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

　　　** 不符合关注分离（Separation of Concerns）的原则

　　　** 配置和调用方式非常混乱，而且基于事件的异步模型不友好

　　-- axios  Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax；axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

　　　** 从浏览器中创建 XMLHttpRequest

　　　** 支持 Promise API

　　　** 客户端支持防止CSRF

　　　** 提供了一些并发请求的接口（重要，方便了很多的操作）

　　　** 从 node.js 创建 http 请求

　　-- fetch  号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

　　　**  基于标准 Promise 实现，支持 async/await

　　　**  更加底层，提供的API丰富（request, response）

　　　**  脱离了XHR，是ES规范里新的实现方式

　　　**  只对网络请求报错，对400，500都当做成功的请求

　　　**  默认不会带cookie，需要添加配置项

　　　**  没有办法原生监测请求的进度，而XHR可以

9、es6新特性接触过哪些？你是怎么学习es6的？

https://www.jianshu.com/p/ac1787f6c50f

https://blog.csdn.net/qq_45534098/article/details/107787529

答：1）es6新特性

　　-- let和const：let不会声明提升，const定义时必须被赋值

　　-- 模板字符串 `` ：基本字符串格式化，表达式直接使用${}嵌入

　　-- 数组新增了map和reduce方法

　　　** map(func)：接收一个函数，将数组里面的元素处理后，返回一个新数组

　　　** reduce(func，val-可选)：从左到右数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数。

　　-- 扩展运算符（...）：...arr将一个数组分隔成由逗号分隔的参数序列

　　-- 箭头函数：this只想上下文里对象的指向，没有上下文对象，指向windows；call、apply、bind等方法不能改变this指向

　　-- 解构赋值：字符串、对象、数组

　　-- promise：异步操作

　　-- map：本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对象（object 是 <string,object>集合，map是 <object,object>集合）

　　　** map .set(key, value)  // 添加

          ** map.clear()  // 清空

　　   ** map.delete(key)  // 删除指定元素

　　   ** map.has(key)  // 判断是否存在

　　   ** map.forEach(function(key,value){})  //遍历元素

　　-- set：本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。（最简单的数组去重方法）

　　　**  set.add(1)  // 添加

　　　**  set.clear()  // 清空

　　　**  set.delete(2)  // 删除指定元素

　　　** set.has(2)  // 判断是否存在

　　　**  set.forEach(function(){})  //遍历元素

       2）阮一峰教程

10、解构赋值可以解构字符串吗？

答：可以。字符串在解构赋值的时候被转换成一个类似数组的对象，数组存在length属性，所以还可以对这个属性进行解构赋值。

11、props是单向数据流还是双向数据流？怎么修改props的值

答：官方解释：props是单向数据流，父级的prop更新会向下流向子组件，但反过来是不行的。这样做是防止子组件意外改变父组件的值，从而导致数据流向难以理解。

　　修改props的值：

　　-- 在子组件内定义一个data property，并将这个prop作为初始值

　　-- 使用prop值定义一个计算属性

　　-- 父组件中此Prop用data替换，并且在watch中监听变化，在子组件中通过$refs取到，此时可以向父组件写入（可以根据子组件此属性变化的需求选择是否在子组件监听），避开了关于Prop的规定，实现了双向绑定。

　　总结：

　　1）如果传递的prop是基本数据类型，子组件不能修改父组件的值，符合单向数据流

　　2）如果是引用数据类型，父子组件是可以双向通信的，违背了单向数据流

　　故：props传递参数的不同，决定子组件是否能改变父组件prop传递的值。

12、props可以定义多种类型吗？

答：可以。

　　例：-- 基本类型  propsA：Number　　-- 多种数据类型  propsB：[String，Number]

　　-- 必填的字符串 propC: { type: String, required: true }　　-- 带有默认值的数字 propD: { type: Number, default: 100 }

13、v-for 做循环的时候为什么要带上key？

答：v-for渲染元素列表时，使用就地复用策略；列表数据修改的时候，它会根据key值去判断某个值是否变化，如果被修改，就重新渲染这一项，反之就复用之前的元素。key的作用是为了更高效的更新虚拟dom。

　   简单来说，vue在进行页面更新时，会通过Diff算法对虚拟DOM进行更新，因为真实的DOM消耗比较大。

（拓展）diff算法

答：diff算法--用来计算出虚拟dom（Virtual Dom）被改变的部分，然后针对该部分进行原生dom操作，从而避免渲染整个页面。

　　diff算法三大策略（顺序执行）：

　　-- tree diff：对树每一层进行遍历，找出不同

　　-- component diff：数据层面比较差异（同一类型组件，继续原策略执行；不是同一类型组件，替换所有子节点）

　　-- element diff：真实dom渲染，结构差异比较

14、vue-cli脚手架用什么版本？

答：vue目前用的是v2.6.11（简称v2.0）。

       vuecli用的是3.0版本，目前固定版本就是3.0。

　　vue框架版本调整，脚手架肯定会调整；但是脚手架更新并不会意味着vue更新。

（拓展）vue和vuecli区别？

答：vue是框架，vuecli是由vue框架衍生出的脚手架，是一套大众化的前端自动化解决方案，核心是 webpack，还有相关辅助插件组成，前端自动化规则，输入输出文件格式，文件的监听，文件的路径都是已经配置好了。

　　实际开发中按照需求做调整。

　　也可以自己按照vue框架自己搭建，但是需要丰富的经验，否则可能忽略很多细节。

15、你对webpack了解多少？

https://www.cnblogs.com/gaoht/p/11310365.html

https://www.cnblogs.com/chengxs/p/11022842.html

答：...

16、你知道arguments嘛？作用？

https://www.jianshu.com/p/e6bfa4bdf718

答：它是js的内置对象，每个函数都具有一个arguments对象，它包含了函数所调用的参数，通常把它当做数组来用，用它的length得到参数数量，但它实际却不是数组，不可调用数组的方法。

（拓展）可以把argument转换成真正的数组嘛？

答：可以的。

　　-- var args = Array.prototype.slice.call(arguments)

　　args是一个标准数组，可以使用数组的方法了。