最近在找工作，记录一下遇到的面试题和整理的答案。-vuevue-router知道吗？有哪些不同的模式？https://www.jianshu.com/p/4c5...https://www.jianshu.com/p/557...https://blog.csdn.net/weixin_...vue-routervue-router是Vue深度集成的单页应用的路径管理器。在Vue的单页应用中，它建立了url和page的映射关系。hash/historyvue-router在实现单页应用前端路由时提供了两种方法：hash和history，根据mode参数决定使用哪一种。hash模式的url中会有一个#，#是url的锚点，代表在页面中的一个位置。vue-router组件跳转时，只会改变#后面的部分，所以不会向后端发送请求，重启页面加载时，只会渲染指定位置的dom。每次更改#后面的部分，浏览器都会在历史列表中添加一条新记录，所以按Back会返回到之前的位置。hash模式的本质原理是Wendow的onhashchange时间，用来监听urlhash的变化，从而更新组件渲染。#符号不包含在历史模式url中。其原理是利用h5中的pushState或replaceStateapi实现只在浏览器历史记录中添加新记录，更改location地址栏后不重新请求服务器的功能。但在这种模式下，页面刷新时会发送一个请求。如果服务端需要特殊配置，避免返回404。再说下vue中的组件传参。https://www.jianshu.com/p/85b...父组件传递给子组件：父组件通过component标签中的冒号参数名（:paramsName）传递，子组件为通过props参数接收。在子组件中调用this.$parent.paramsName可以直接访问父组件的参数/方法。子组件通过事件传递给父组件this.$emit()父组件通过this.$refs直接调用子组件参数父组件通过this.$children[i]直接调用子组件参数.兄弟组件通过事件总线，通过vuex传递，说说vue组件的生命周期。https://www.cnblogs.com/qidh/...https://www.jianshu.com/p/410...beforeCreate第一个生命周期函数，这个函数在vue实例初始化的时候调用，在这次data方法和dom都没有初始化。创建创建的vue实例时会调用此函数。这个时候数据和方法都有了，但是dom模板还没有渲染出来。这个阶段可以向后台请求数据。beforeMount在挂载开始之前被调用。此时data对象中的数据和用vue语法编写的模板已经编译成html，但是还没有开始挂载。挂载的dom树完全渲染到页面后调用，此时用户可以看到真实的数据，组件创建阶段结束。这个阶段可以进行dom操作，可以初始化一些第三方ui插件。beforeUpdate在数据更新但未在页面上呈现时调用。updated在数据更新后虚拟dom重新渲染后调用。beforeDestroy在实例销毁之前调用，组件数据、方法等仍然可以正常访问。destroyed组件销毁后调用，数据和方法不可用。说说vue的双向绑定。https://github.com/DMQ/mvvmhttps://blog.51cto.com/zhoulu...双向绑定是指当数据发生变化时，视图也发生变化，而当视图发生变化时，有时，数据也会同步变化。Vue2通过js的defineProperty中的set和get函数以及发布-订阅模式完成双向绑定。Vue在创建实例的时候，会初始化一次实例的数据对象，通过defineProperty为每个数据属性设置get/set来监听拦截，分配一个dep订阅者的管理数组dep。编译时会在属性数组dep中添加对应的订阅者，v-model、{{}}、v-bind都会添加订阅者。一旦数据属性的值被修改，就会触发该属性的set方法通知订阅者数组dep，订阅者数组循环调用每个订阅者的update方法更新视图。说说vue2的getter/setter方法拦截数据的缺点和解决方法。https://blog.51cto.com/zhoulu...添加或删除对象时无法监控。因为在观察数据时，会遍历数据的每一个已有属性，并添加getter/setter，后面设置的属性没有机会设置getter/setter，所以检测不到变化。同样，当删除一个对象属性时，getter/setter会随着属性一起被删除，变化无法被拦截。像vm.$set/Vue.set和vm.$delete/Vue.delete解决这个问题的APIgetter/setter是针对对象的。对于数组的修改，Vue重写了Array的默认方法，并在调用这些方法时发布更新消息。一般不需要注意，但是对于下面两种情况：当你使用索引直接设置一个item时，例如：vm.items[indexOfItem]=newValue当你修改数组长度时，例如:vm.items.length=newLengthrequiresvm.$set/Vue.set和vm.items.splice(newLength)解决。详情请参考官方说明。每次为数据设置值时，都会调用setter函数，此时会发出属性更新消息，即使数据的值没有改变。.从性能和方便的角度，我们肯定希望模板在值没有变化的情况下不更新。在父子/兄弟组件和页面之间跳转时，生命周期的顺序是什么？https://blog.csdn.net/qq_1685...父子组件和兄弟组件的生命周期顺序不一样。页面跳转的时候，v-for使用数组的索引作为key，每个页面的生命周期执行顺序会不会有问题？https://segmentfault.com/a/11...更新DOM时，会出现性能问题，会出现一些statebug——js操作数组的API有哪些？通用方法join()：在项目之间添加一个分隔符并返回一个字符串。pop()：删除最后一项并返回删除的值。push()：向最后一项添加一个值，并返回添加后的数组长度。shift()：删除第一项并返回删除后的值。unshift()：将值添加到第一项，添加后返回数组的长度。splice()：拼接/删除数组，返回删除项数组。slice()：截取一个数组，返回截取的数组，不修改原数组。concat()：连接数组。sort():排序数组迭代forEach每一项调用一次函数map每一项调用一次函数返回一个新的数组filter过滤每一项并返回一个满足要求的新数组reduce/reduceRight运行函数返回每一项单值every检查每一个元素，如果所有元素都满足要求返回true，否则falsesome检查每一个元素，如果有一个元素满足要求返回true，否则falseindexOf/lastIndexOf找到数组中指定元素的第一个下标，不返回-1高阶函数引用类型的深拷贝/浅拷贝对于普通类型变量，值直接存入栈内存，不存在浅拷贝问题。对于引用类型的变量，值存放在堆内存中，而栈内存只存放该值所在内存地址的引用值，会存在浅拷贝问题。浅拷贝只复制引用，修改复制的数据会影响原始数据，使数据不安全。普通的for...in、Object.assign()、直接赋值都是常见的浅拷贝。深拷贝复制时会生成一份新的数据副本，修改复制后的数据不会是原来的数据。Json.stringify()/Json.parse()（对象内的方法不能复制），jquery中的$.extend(true,[],array)，lodash中的_.deepclone(item)，手写递归循环都可以实现深拷贝。js中异步请求的实现方式有哪些？https://blog.csdn.net/CYS_zxc...XMLHttpRequestjquery实现封装ajaxfetch-CSS盒模型块级元素和行内元素，有什么区别。移动设备兼容viewportremrem是css3的一个新的相对单位。rem是相对于HTML根元素的大小。vm/vhvh和vw方案将视觉视口宽度window.innerWidth和视觉视口高度window.innerHeight分成100份。flexflex弹性布局的用法可以参考阮一峰老师的这篇文章，Flex布局教程：语法。在更大的屏幕上，弹性布局非常适合向用户展示更多内容。-浏览器相关什么是跨域？有哪些解决方案？指一个域下的文档或脚本试图访问另一个域下的资源，这是由于浏览器同源策略的限制而产生的。如果来源不同，则禁止脚本访问该资源。解决方案CORS(Cross-OriginResourceSharing)普通跨域请求：只有服务端可以设置Access-Control-Allow-Origin，前端不需要设置。如果要用cookie请求：前端和前端都需要设置。需要注意的是，由于同源策略的限制，读取的cookie是跨域请求接口所在域的cookie，不是当前页面。jsonp浏览器的script、img、iframe标签不受同源策略限制，所以通过script标签导入一个js文件。js文件加载成功后，会执行我们在url参数中指定的回调函数，并将我们需要的json数据作为参数传入。在服务端，当req.params参数有callback属性时，数据作为回调的参数执行，拼接成字符串返回。优点：兼容性好，也可以在很老的浏览器上使用，简单易用，支持浏览器和服务器的双向通信。缺点：只支持GET请求，只支持跨域HTTP请求（不支持HTTPS）。反向代理通过nginx配置一个代理服务器（域名与domain1相同，端口不同）作为跳板，反向代理访问domain2接口。,并且可以顺便修改cookie中的域信息，方便当前域cookie的写入，实现跨域登录。
