标签：vue -- 汇总 面试 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是一个标准数组，可以使用数组的方法了。
标签：vue,--,汇总,面试,2020,数组,组件,监听,路由 来源： https://www.cnblogs.com/candy-xia/p/13402871.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。