前端常见面试题-2

金九银十，开始充电，准备冲刺，祝各位都找到心仪的好工作！！！冲冲冲
在这里简单总结一下最近看的面试题。共勉
回顾一下vue内容。

1~keep-alive 是什么?说一下

keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗，简单一点来说就是从页面1链接到其他页面后回退到页面1不用在重新执行页面1的代码，只会从缓存中加载之前已经缓存的页面1，这样可以减少加载时间及性能消耗，提高用户体验性。
但实际项目中,需要配合vue-router共同使用
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

2~data为什么是一个函数？

当data是一个函数的时候，每一个实例的data属性都是相互独立的，不会相互影响。这是因为js本身的特性带来的，跟vue本身的设计无关。
js本身的面向对象编程也是基于原型链和构造函数，应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。

~3vue3.0和2.0的区别？

1. 默认进行懒观察（lazy observation）。
   在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
2. 更精准的变更通知。
   比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
3. 3.0 新加入了 TypeScript 以及 PWA 的支持
4. 部分命令发生了变化：
   下载安装 npm install -g vue@cli
   删除了vue list
   创建项目 vue create
   启动项目 npm run serve
5. 默认项目目录结构也发生了变化：
   移除了配置文件目录，config 和 build 文件夹
   移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
   在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

4~$nextTick在什么情况下使用？

我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候需要用到this.$nextTick函数。
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。比如你在Vue生命周期的created()/mounted()钩子

5~数据更新，但是视图不更新的情况怎么解决？

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。
解决办法：
使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
Vue.set(vm.someObject, 'b', 2) 或者 this.$set(this.someObject,'b',2) （这也是全局 Vue.set 方法的别名）

6~路由守卫说一下？

router.beforeEach((to,from,next)=>{}) （这个一笔带过，感兴趣的小伙伴百度吧，我就不赘述了）

7~vue路由改变传参怎么监听变化？

1.第一种
 watch: { '$route'(to, from) { // 在此处监听 }
2.第二种
beforeRouteUpdate (to, from, next) {//这里监听}

8~vue跳转页面的传参？

query传参，相当于get请求，页面跳转时参数会在地址栏中显示  接收参数：this.$route.query.id
params传参，相当于post请求，页面跳转时参数不会在地址栏中显示  接收：this.$route.params.id

(https://blog.csdn.net/louyuqi520/article/details/109816753)

9~作用域插槽和其他插槽的区别？

1.插槽slot
在渲染父组件的时候，会将插槽中的先渲染。
创建组件虚拟节点时，会将组件的儿子的虚拟节点保存起来。当初始化组件时，通过插槽属性将儿子进行分类{a:[vnode],b[vnode]}
渲染组件时会拿对应的slot属性的节点进行替换操作。（插槽的作用域为父组件，插槽中的HTML模板显示不显示、以及怎样显示由父组件来决定）
有name的父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联匿名插槽。
2.作用域插槽slot-scope
作用域插槽在解析的时候，不会作为组件的孩子节点，会解析成函数，当子组件渲染时，会调用此函数进行渲染。
或者可以说成作用域插槽是子组件可以在slot标签上绑定属性值，在父组件可以拿到子组件的数据，通过子组件绑定数据传递给父组件。（插槽的作用域为子组件）
//有name的属于具名插槽，没有name属于匿名插槽
普通插槽渲染的位置是在它的父组件里面，而不是在子组件里面
作用域插槽渲染是在子组件里面

10~说下vue的响应式原理？

实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.definePropertype()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

11~vue中mixins的理解及应用

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。（一笔带过了，深入了解的百度吧）

再回顾一下js的内容

12~你常用数组有哪些？

push()，pop()，shift()，unshift()，splice()，sort()，reverse()可被vue检测到
filter(), concat(), slice()。这些不会改变原始数组，但总是返回一个新数组。

13~es6知道多少？

模板字符串、解构赋值、箭头函数、let 与 const、class类，Promise，Generator，export、import，Default导出，Proxy代理
更多戳[https://www.imooc.com/article/19684](https://www.imooc.com/article/19684]

14~async,await 说一下？

在ES6中封装了Generator函数的语法糖async函数，但是将其定义在了es7中。ES7定义出的async 函数，终于让 JavaScript 对于异步操作有了终极解决方案。Async 函数是 Generator函数的语法糖。使用 关键字 Async 来表示，在函数内部使用 await来表示异步。相较于 Generator，Async函数的改进在于下面几点：Generator 函数的执行必须依靠执行器，而 Async（） 函数自带执行器，调用方式跟普通函数的调用一样。Async 和 await相较于 * 和 yield 更加语义化。async 函数返回值是 Promise 对象，比 Generator函数返回的 Iterator 对象方便，可以直接使用 then（）方法进行调用。
https://www.cnblogs.com/lunlunshiwo/p/8922500.html

15~去重

https://zhuanlan.zhihu.com/p/100610150

16~怎么判断空对象？

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组。
如果我们的对象为空，他会返回一个空数组。

Object.keys(obj).length === 0 ? '空' : '不为空'

17~判断数组的的方法?

const arr=[ 1,2,3,4]
① Array.isArray
Array.isArray(arr)  // true  在IE9以下版本，不支持
② instanceof
arr instanceof Array  // true   instanceof关键字，用instanceof判断，会比Array.isArray判定的范围要广泛
③ polyfill中，就是如此实现：
if (!Array.isArray) {
            Array.isArray = function (arg) {
                return Object.prototype.toString.call(arg) === "[object Array]"
            }
        }
        Object.prototype.toString.call(arr) === '[object Array]'  // true
④ constructor
 arr.constructor === Array // true
 arr.__proto__.constructor === Array //true

18~元素水平垂直居中

1.position:absolute/fixed;top:0;right:0;bottom:0;left:0; margin:auto;(不用知道元素的宽高)
2.position:absolute/fixed;top:50%;left:50%; margin-top:-(height/2);margin-left:-(width/2)；
(需知道元素的宽高)
3.flex布局

19~手写jsonp，最有成就感的功能，开发流程，cors除了头不同外还有什么不同，建议：细节问题。

这个没有固定答案。自己临场发挥吧，多看看代码
(http://www.ruanyifeng.com/blog/2016/04/cors.html)

好了，先总结这么多吧。祝各位跳槽成功。冲冲冲！