前端面试题目刷题、汇总

爱吃糖的小明

已于 2022-03-02 11:00:25 修改

阅读量1.8k

点赞数 3

分类专栏：笔记文章标签：前端

于 2021-12-31 14:38:26 首次发布

本文链接：https://blog.csdn.net/weixin_45785873/article/details/122254950

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

群友二面：

1. SSR 和CSR 的区别，Nuxt 这类的SSR 方案和直接渲染ejs 这类方案有什么本质的区别

2. Vue 和 React 使用的比重是怎样的，这两者各自的优劣介绍一下

3. PureComponent 会引入什么问题，什么情况下会需要用到它

4. vue 的单文件开发模式，这个解析 vue-loader 是如何实现的。

5. 如果 template 语吉换掉的话，会如何处理。

6. script 的部分会如何处理，由于babel-loader 是只能针对 js 类型的文件进行转化，那.vue 文件中的script 标签是如何被 babel-loader 读取的。

7. vue scoped 是怎么实现的，dom 上的哈希是如何和 style 中的哈希对应起来的，又是如何保证每次生成的哈希不变的

8. babel.config.js 和.babelrc 有什么区别，应该在什么场景使用，同时使用的话会出现什么现象

9.Vue 调用render 西数的时机是在什么时机被触发的，后续状态变更导致render 又是谁触发的

10. Vue 和 React 在数据更新上的差异，vue 这种数据劫持的方式会不会带来额外的问题，vue3 在这些问题上有优化么

11. $set和$forceupdate 都做了哪些事

12.异步更新 DOM 这个操作，Vue 和 React 都是如何实现的，vue 的异步处理还有其他方式可以做么，除了 MessageChannel 还有其他和他用法类似的 API么

13. 公用的代码如何做提取，如何判断一个资源是否应该被提取

14. Portal 除了做了把组件提到对应的 DOM 下之外，还做了哪些事

15. 用什么方式发请求，axios 是个同构的工具，它是如何实现区分 Node 和浏览器环境的

16. axios 内部如何把xhr 的callback 转换为 promise 的，如何处理请求异常的

1、webpack 中 chunkHash 与 contentHash 区别；
2、写过 webpack 的 loader 和 plugin 么；
3、webpack 处理 image 是用哪个 loader，限制成 image 大小的是...；
4、webpack 将 css 合并成一个；
5、webpack 的摇树对 commonjs 和 es6 module 都生效么，原理是；
6、实现一下「模版字符串」功能；
7、实现一下 Promise.all (Promise 不用写)；
8、怎么实现响应式布局的；
9、css flex 的各个属性值；
10、css 动画 animation 各个时间值含义；
11、css 如何实现让一个元素旋转并横向移动，如果只用一个 css 属性；
12、less 与 sass 区别，技术选型时如何取舍；
13、ES6 symbol 如何使用以及使用场景；
14、ES6 Proxy 如何使用以及使用场景，说说 Reflect；
16、generator 有什么应用场景;
17、async await 如何实现的；
18、git reset 与 revert 区别，revert 多个 mr 改如何处理；
19、git 如何撤回 add 后的内容；
20、http2 与 http1.1 区别，了解 http3 么，说说；
21、tcp 与 udp 的区别；
22、还问了简历相关的一些问题(例如：性能优化、E2E 测试相关的);

1、计算时间重叠部分
const list = [
{ start: '12月10日', end: '1月10日' },
{ start: '1月3日', end: '1月13日' },
{ start: '1月5日', end: '1月11日' },
{ start: '1月7日', end: '1月14日' },
{ start: '1月16日', end: '1月18日' },
];
最终结果为：
[
{ start: '12月10日', end: '1月14日' },
{ start: '1月16日', end: '1月18日' },
];

2、用vue写一个日历，上月的最后几天和下月的前几天需要显示出来
如：
su mo tu we th fr sa
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 1 2 3 4 5

3、深拷贝一个Object
function cloneDeep(obj) {}
如： const a = { a:1, b:[1, 2] }; const b = cloneDeep(a)

4、文件的长度为length,使用B/K/M/G的格式显示，如果个位数，保留2位有效数字。
function getSize(size) {}
如： getSize(111111) = 111.11K

5：将下面的list转化为树形结构，请实现group函数
const list = ["1","2/1","2/2","x/x/h","x/x/y","x/x/z","x/y/h","x/y/x","x/y/z"];
const tree = group(list);
console.log(tree);
// 结果：
[
{ name: "1" },
{ name: "2", children: [ { name: "1" }, { name: "2" } ] },
{
name: "x", children: [
{ name: "x", children: [ { name: "h" }, { name: "y" }, { name: "z" } ] },
{ name: "y", children: [ { name: "h" }, { name: "x" }, { name: "z" } ] }
]
}
]

常见面试题目汇总，这里描写的答案，仅仅作为参考，详细答案在文章最后面

1.有使用过Vue吗？说说你对Vue的理解?

2.说说你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢?

3.什么是双向绑定？原理是什么?

4.请描述下你对Vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？

5.Vue组件之间的通信方式都有哪些？

6.v-show和v-if有什么区别？使用场景分别是什么？

7.v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

8.SPA首屏加载速度慢的怎么解决？

9.Vue中组件和插件有什么区别？

10.为什么data属性是一个函数而不是一个对象？

11.动态给Vue的data添加一个新的属性时会发生什么？怎样解决？

12.Vue实例挂载的过程是什么？

13.Vue中的$nextTick有什么作用？

14.说说你对Vue的Mixin的理解，有什么应用场景？

15.说说你对slot的理解？slot使用场景有哪些？

16.Vue.observable你有了解过吗？说说看

17.你知道Vue中key的原理吗？说说你对它的理解

18.怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？

19.Vue常用的修饰符有哪些？有什么应用场景？

20.你有写过自定义指令吗？自定义指令的应用场景有哪些

21.Vue中的过滤器了解吗？过滤器的应用场景有哪些？

22.什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路

23.你了解Vue的diff算法吗？说说看

24.Vue项目中你是如何解决跨域的呢？

25.SSR和CSR的区别

26.Hash和History的区别

27.axios为什么既能在浏览器环境运行又能在服务器(node)环境运行？

28.axios 内部如何把xhr 的callback 转换为 promise 的，如何处理请求异常的

有使用过Vue吗？说说你对Vue的理解?

MVVM框架：Model-View-ViewModel【模型-视图-视图模型】，将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

数据驱动：由于Vue基于MVVM框架，因此他能够避免直接操作DOM，而是通过数据的变化来生成视图，又能通过视图的变化来改变数据，这样一个双向绑定的关系，这是Vue最核心的特点之一

SPA：Vue只有一个HTML页面，通过路由方式实现页面的局部切换，公共资源部一次性加载完，这种单页面的方式，极大的提高了运行的性能

渐进式：Vue是套用于构建用户界面的渐进式框架，自底向上逐层应用，需要时就引入，让代码得到很好的复用，也让项目得到很好的扩展和延伸

说说你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢?

SPA单页面：就是它只有一个HTML页面，它是通过路由跳转的方式实习页面的切换。

优点是：静态资源一次性加载完，逻辑代码放在一个个js文件中，执行速度很快，增强了用户的体验和项目的流畅度；其次，切换页面不会发送请求，减少服务器的请求压力；

缺点：它的首次加载耗时会比较多，它不利于SEO(搜索引擎优化)

实现：单页面应用通过两种方式实现，一种是Hash，一种是history

什么是双向绑定？原理是什么?

双向绑定：即当数据发生变化的时候,视图发生变化,当视图发生变化的时候,数据也会跟着同步变化。

原理：基于数据劫持，给绑定的数据添加观察者，实时的监听数据的变化，然后通知视图去改变，或者视图发生改变时，通知数据改变的这样一个过程

请描述下你对Vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？

生命周期：每个Vue实例从创建到销毁的这样一个过程。Create和mounted的区别在于create期，Vue实例还没有被挂载到页面上，而在mounted期，Vue实例已经被挂载到页面傻上，所以一般情况下，数据请求没什么区别，但当请求数据时需要操作DOM，就需要在mounted生命周期中请求数据。

Vue组件之间的通信方式都有哪些？

Props和$emit、Vuex、$parent和$child、bus

v-show和v-if有什么区别？使用场景分别是什么？

v-show通过css样式中的dispaly：none；控制元素显示、隐藏

v-if 通过控制vue的虚拟dom树上的节点，来联动控制真实dom上的节点，从而控制元素的显示、隐藏。

v-if更加合适，如请求后台接口通过后台数据控制某块内容是否显示或隐藏，且这个数据在当前页不会被修改

v-show更加合适，如页面中有一个toggle按钮,点击按钮来控制某块区域的显示隐藏

v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用。如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>) 上。

SPA首屏加载速度慢的怎么解决？

加载慢的原因：网络延时问题、资源文件体积是否过大、资源是否重复发送请求去加载了、加载脚本的时候，渲染内容堵塞了

优化方式：减小入口文件积、静态资源本地缓存、UI框架按需加载、图片资源的压缩、组件重复打包、开启GZip压缩、使用SSR

Vue中组件和插件有什么区别？

组件：把图形、非图形的各种逻辑抽象为一个统一的概念，Vue中的每一个.vue文件都可以是一个组件

插件：通常为Vue添加全局功能

区别：

组件编写在每个.vue文件中，插件编写在Vue的install方法中
组件注册在component中，插件则用Vue.use()注册
组件用于构成业务模块，插件用于增强功能模块

为什么data属性是一个函数而不是一个对象？

组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

(组件可以复用, 为了保证复用时每个组件的数据都是独立的, 所以必须是一个函数)

动态给Vue的data添加一个新的属性时会发生什么？怎样解决？

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如果想要使添加的值做到响应式，应当使用$set()来添加对象。

Vue实例挂载的过程是什么？

实例挂载即通过render生成虚拟DOM，然后通过_update将虚拟DOM生成真实DOM结构，并且渲染到页面中，如果没有render，则先去编译内容，在编译中初始化实例

Vue中的$nextTick有什么作用？

Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新

$nextTick：是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

应用场景：如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

说说你对Vue的Mixin的理解，有什么应用场景？

mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能，本质上是一个js对象，他包含了Vue组件中的任意功能选项，比如data、methods、computed

应用场景：应用在相同或相识的代码，而且这些代码的功能也是相对独立的时候，就可以利用mixin提取相同的代码出来

说说你对slot的理解？slot使用场景有哪些？

Slot是组件中的一个占位符，它在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置）

使用场景：如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情。

通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用

Vue.observable你有了解过吗？说说看

Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象(以作为最小化的跨组件状态存储器)

在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择

你知道Vue中key的原理吗？说说你对它的理解

key的作用主要是为了高效的更新虚拟DOM;

如果没有唯一的key, 数据更新时, 相同节点更新前后无法准确一一对应起来,会导致更新效率降低;

当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点;

如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新;

怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？

缓存当前组件：keep-alive，缓存后可以通过beforeRouteEnter()、actived()更新数据，keep-alive是Vue内置的组件，能在组件切换中将状态保存在内存中，防止重复渲染DOM，keep-alive包裹动态组件时，会缓存不活动的组件实例，不会销毁

Vue常用的修饰符有哪些？有什么应用场景？

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.self: 当事件发生在该元素本身而不是子元素的时候会触发；

.capture: 事件侦听，事件发生的时候会调用

你有写过自定义指令吗？自定义指令的应用场景有哪些

Vue自定义指令：Vue.directive(‘指令名称’，{

[指令周期]:()=> { 逻辑代码 } })

应用场景：防抖函数、图片懒加载、copy功能、添加水印、权限校验

Vue中的过滤器了解吗？过滤器的应用场景有哪些？

过滤器：把不需要的数据过滤掉(Vue3中已废弃filter)

什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路

虚拟DOM：即真实DOM的抽象化，以JS对象作为基础树，用对象的属性来描述节点，他可以和真实DOM的属性一一照应，真实DOM的元素很庞大，它是影响性能的一个重要因素，二虚拟DOM利用最小的代价，来模拟真实的DOM,从而提高性能

你了解Vue的diff算法吗？说说看

Diff算法是一种通过同层的树节点进行比较的高效算法。其特点是：比较只会在同层级进行比较，不会跨级；比较遵循两边向中间比较

Vue项目中你是如何解决跨域的呢？

跨域：是浏览器基于同源策略的一种安全手段；同源策略：指在同一个域中，即协议相同、端口相同、主机相同

解决跨域：JSONP、CORS、Proxy、Nginx方向代理

SSR和CSR的区别

SSR是服务器渲染，即页面通过服务器后台解析返回客户端

CSR是客户端渲染，即页面通过发生请求，服务器返回一个模板页面，浏览器从上至下解析过程中需要发送请求获取数据，最后调用引擎模板渲染HTML结构，并把渲染到结果添加到页面。

Hash和History的区别

Hash和History是URL的一种呈现实现，Hash是地址栏URL中的#符号；History利用的事HTNL5 History interface 中新增的pushState()和replaceState()方法

区别：Hash的改变不会发生请求，页面不会发生重载，刷新也不会丢失页面，不会包括在http请求中，对后端完全没有影响，

axios为什么既能在浏览器环境运行又能在服务器(node)环境运行？

他在发送请求时会判断时如果XMLHttpRequest对象存在则使用客户端方式发送请求否则判断process对象是否存在，存在则使用服务端方式发送请求。

axios 内部如何把xhr 的callback 转换为 promise 的，如何处理请求异常的

由于js是单线程，为了防止阻塞，会有很多异步回调函数callback，嵌套层次多了，可读性就变得很差，同时出现回调地狱问题，因此Axios，把回调转变成为一个个promise，回调以链式调用，解决请求嵌套问题。每个promise都有三个状态。pending、Fulfilled、Rejected。最初为pending，状态一但改变为Fulfilled、Rejected中的一种，即成永远，不再改变。

详细参考答案 web前端面试 - 面试官系列 web前端面试 - 面试官系列web前端面试,vue面试题,react面试题,js面试题,大厂面试题,阿里面试题,京东面试题https://vue3js.cn/interview/