呐，这期就是面试题干货了！众所周知，金九银十，是跳槽面试的好季节，下面给大家带来21道面试题，答案嘛，仅供参考，题目要自己多去思考。

1.函数的防抖和节流

当用户频繁操作，导致接口数据多次请求，并给页面带来性能上的损失，给服务器造成压力的时候，我们可以用防抖节流的方法来减少甚至避免这种情况发生时带来的影响。

那么简单说下什么是防抖节流。

防抖

防抖就是在一定时间内，如果没有再触发事件，那么事件函数只会执行一次，如果有，那么会重新开始计时。比如，规定时间在1秒内，用户一秒拉了一次滚动条，后续没有再动滚动条，此时函数只会执行一次，发生下拉刷新。但是用户一秒内下拉多次滚动条，则会清空之前的计时，重新计算，也就是再过一秒再说。当然实际开发中这个时间可能是几百毫秒并不是1秒。具体代码自己去找，面试就不要偷懒了。

节流

节流的比喻就比较简单了，当持续触发事件的时候，规定一定时间内只能使用一次处理函数，就好比水龙头，一打开哗啦啦的，但是你稍微拧紧一下，就会在一定时间内有规律的一滴滴的滴下来，这就是节流。或者这么说吧，有些人呢工资一发下来，就各种花销来满足自己压抑了许久的消费欲，这是月光族，也就是频繁触发事件。但是有些人呢，每个月只花2000块钱，剩下的存着，这就是精打细算了，也就是节流。在这里，一定时间是每个月，一次事件函数就是花的2000块钱。

一点点细节

防抖需要在事件调用之前，清除定时器，节流则需要先判断定时器是否为空，空了再继续执行。（这些都是细节）

2.vue当中的data为什么是函数

为什么呢？因为data如果是对象的话，当页面上有用到data当中值的时候，如果值一旦发生改变，那么所有涉及到该值的地方都会发生改变，也可以理解为变量污染，是一个浅拷贝。当data为函数的时候，因为函数的作用域，每次调用出来的值都是互不影响的，可以理解为深拷贝。此处可看下官方文档

3.数组去重

1. set方法去重
2. 两层for循环再用splice实现去重
3. indexOf方法去重
4. sort方法去重
5. includes方法去重
6. filter去重
7. 递归去重

可以看看这篇文章：数组去重

4.讲下promise和asycnc await

promise是为了解决回调地狱而产生的一种异步编程思想，比起回调地狱，会更加直观和易于维护。async await则是基于promise和generator的语法糖，只是为了书写代码更加流畅更像同步代码，增加代码可读性。await必须出现在async函数内部，不能单独使用。await后面可以跟着任何的js表达式。

5.vue如何实现组件间的通信

一般回答props父子传值，$emit子传父，还有vuex三种即可，当然也可以回答provide/inject隔代组件通信，EventBus通信，ref。更多通信方式推荐看看这篇文章：组件通信

6.都说vue是渐进式框架，如何理解渐进式

就像vue很多地方都提倡懒加载，按需导入，组件化开发一样，水哥认为这就是一种该吃吃该喝喝的想法，饿了就吃饭，渴了就喝水，用到的时候再用，一步步来，渐进式地按部就班去开发。这是个人理解，你也可以拥有自己的想法。

7.单页面应用的优缺点

优点

1. 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染。
2. 前后端职责业分离(前端负责view，后端负责model)，架构清晰
3. 减轻服务器的压力

缺点

1. SEO(搜索引擎优化)难度高
2. 初次加载页面更耗时
3. 前进、后退、地址栏等，需要程序进行管理，所以会大大提高页面的复杂性和逻辑的难度

8.vue的生命周期和各自的作用

1. 总共分为8个阶段，分别为beforeCreate.created、beforeMount、mounted、beforeUpdate、 updated、beforeDestroyed、destroyed。

2. beforeCreate:在实例初始化之后，数据观测者（data observer）和event/ watcher事件配置之前调用。

3. created:在实例创建完成后立即调用。在这一步，实例已完成以下的配置:数据观测者，属性和方法的运算, watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

4. beforeMount:在挂载开始之前调用，相关的render函数首次调用。

5. mounted: el被新创建的vm.$el替换,并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素,当调用mounted时vm.sel也在文档内。

6. beforeUpdate:在数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。

7. updated:由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩。

8. beforeDestroy:在实例销毁之前调用。在这一步，实例仍然完全可用。

9. destroyed:在Vue. js实例销毁后调用。调用后，Vue. js实例指示的所有东西都会解除绑定，所有的事件监听器会被移除,所有的子实例也会被销毁。

10. 当使用组件的kep- alive功能时，增加以下两个周期。

11. activated在keep- alive组件激活时调用;

12. deactivated在keep-live组件停用时调用。

13. Vue2.5.0版本新增了一个周期钩子: ErrorCaptured，当捕获一个来自子孙组件的错误时调用。

9.vuex的设计模式

单例模式

10.get和post的区别

get是获取数据，post是上传服务器数据，post较为安全，且带参数。get则可带可不带。

11.如何用原生js实现qq截图并编辑文字的效果

这里给个思路，要用到js的一些拖拽和坐标的方法，获取文字可以用clipboard插件，它一般都被用来做点击复制文本的操作。细节就不说了，自己多思考。

12.jquery的ajax和axios的区别

区别

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装—样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装,axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax,ajax不止axios

优缺点

ajax

1. 本身是针对MVC编程，不符合前端MVVM的浪潮
2. 原生XHR开发，XHR本身的架构不清晰，已经有 了fetch的替代方案，jquery整个项目太大，单纯使用ajax却要引入整个jquery非常不合理(采取个性化打包方案又不能享受cdn服务)
3. ajax不支持浏览器的back按钮
4. 安全问题ajax暴露了与服务器交互的细节
5. 对搜索引擎的支持比较弱
6. 破坏程序的异常机制
7. 不容易调试

axios

1. 从node.js创建http请求
2. 支持Promise API
3. 客户端防止CSRF (网站恶意利用)
4. 提供了一些并发请求的接口

13.你对js同步和异步的理解

同步就是吃完饭再去上学，异步就是边去学校边吃饭。

14.vue2和vue3的区别

1. 重构响应式系统，使用Proxy替换Object defineProperty,使用Proxy优势:
2. 可直接监听数组类型的数据变化
3. 监听的目标为对象本身，不需要像Object defineProperty-样遍历每个属性，有一定的性能提升
4. 可拦截apply、ownKeys、 has等 13种方法，而Object. defineProperty不行
5. 直接实现对象属性的新增/删除
6. 新增Composition API,更好的逻辑复用和代码组织
7. 重构Virtual DOM
8. 模板编译时的优化，将一些静态节 点编译成常量
9. slot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组件
10. 模板中内联事件的提取并重用(原本每次渲染都重新生成内联函数)
11. 代码结构调整，更便于Tree shaking,使得体积更小
12. 使用Typescript潜换Flow

15.vue的双向数据绑定原理

一句话版本

由Object. defineProperty()里面的get和set方法实现的，当数据变化被set方法劫持到了，就会触发数据更新，Vue3.0用原生Proxy替换Object. defineProperty。

其他版本

其他版本话很多，且绕还讲不清楚，故略。

16.知道哪些前端性能优化

编码阶段

• 尽量减少data中的数据, data中的数据都会增加getter和setter,会收集对应的watcher
• v-if和v-for不能连用
• 如果需要使用v-for给每项元素绑定事件时使用事件代理
• SPA页面采用keep-alive缓存组件
• 在更多的情况下，使用v-i替代v-show
• key保证唯一
• 使用路由懒加载、异步组件
• 防抖、节流
• 第三方模块按需导入
• 长列表滚动到可视区域动态加载
• 图片懒加载
• SEO优化
• 预渲染
• 服务端渲染SSR
• 打包优化
• 压缩代码
• Tree Shaking/Scope Hoisting
• 使用cdn加载第三方模块
• 多线程打包happypack
• splitChunks抽离公共文件
• sourceMap优化

用户体验

• 骨架屏
• PWA
• 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端
• 开启gzip压缩等。

17.讲一下MVVM

MVVM是Model-View-ViewModel的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑; View代表UI组件，它负责将数据模型转化成UI展现出来，ViewModel 是一个同步View和Model的对象(桥梁)。在MVVM架构下，View 和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和
ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View.上。ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM,不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

18.$nextTick的作用

当遇到数据发生改变，而页面没有及时发生改变的时候，使用$nextTick方法，可以让你的数据变化时，会马上更新视图。nextTick的回调是在下次DOM更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，能够获取更新后的DOM。

19.如何实现proxy代理

webpack自带的devServer中集成了http-proxy-middleware。配置devServer的proxy选项即可

20.v-if和v-show的区别

共同点

v-if 和v-show都能实现元素的显示隐藏

区别

1. v-show只是简单的控制元素的display属性，而v-if才是条件渲染(条件为真，元素将会被渲染，条件为假，元素会被销毁) ;
2. v-show有更高的首次渲染开销，而v-if的首次渲染开销要小的多;
3. v-if有更高的切换开销，v-show 切换开销小;
4. v-if有配套的v-else-if和v-else,而v-show没有
5. v-if可以搭配template使用，而v-show不行

21.sessionStorage和localStorage的区别

1. sessionStorage用于在本地存储一个会话中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
2. 而localstorage用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。

累哦，终于整理完了，实际的题目更多，但是挑一些常问的，重点的，然后写粗来，还是费点时间的，现在是9月11号23：50分，希望本文对你有用。