【2023秋招面经】20220713兴业数金前端一面

前言

本系列主要整理博主2023秋招的面试情况。本节介绍20220713兴业数金前端一面。

1. 自我介绍

2. 为什么要学习vue？

答：首先因为vue是当前前端较为流行的框架，使用vue的公司较多，也证明了这是一个非常成功的框架；第二是因为这个框架是国人编写的，简单易学，上手较快；第三因为这个框架使用了双向数据绑定，数据和视图的交互更加方便；最后因为它含有组件化、视图数据结构分离、虚拟DOM、运行速度快等特点。

3. 双向数据绑定和单向数据绑定的区别，以及双向数据绑定的优缺点？

答：双向数据绑定就是当我们采用MV模式时，就是模型-视图模式时，通常，我们需要编写代码，将从服务器获取的数据进行“渲染”，展现到视图上。每当数据有变更时，我们会再次进行渲染，从而更新视图，使得视图与数据保持一致。而另一方面，页面也会通过用户的交互，产生状态、数据的变化，这个时候，我们则编写代码，将视图对数据的更新同步到数据，以致于同步到后台服务器。而单向数据绑定只有模型----->视图的一个方向的数据传递。

双向数据绑定的优缺点：

①优点：用户在视图上的修改会自动同步到数据模型中去，数据模型中值的变化也会立刻同步到视图中去；无需进行和单向数据绑定的那些相关操作，会简化大量业务无关的代码。

②缺点：增加了出错时的debug的难度、消耗较大，部署很大网站的时候会出现问题。

4. 双向数据绑定报错的话要怎么寻找问题？

答：可以打开开发者模式，会有相应的报错，比如props不存在、期待一个Object你传入了一个Array之类的，可以直接从报错中找到。

5. 解释一下防抖和节流？

• 防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次；
• 节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

6. 项目用什么打包的？

答：webpack。

7. 说一下webpack里做了哪些前端优化？

• 压缩代码：删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件， 利⽤ cssnano （css-loader?minimize）来压缩css
• 利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径
• Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
• Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
• 提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码

8. 对一个绝对定位的盒子怎么水平垂直居中？

①绝对定位+margin:auto ②绝对定位+margin负值 ③绝对定位+translate

9. 隐藏元素的方法？

（1）dispaly:none 消失+重排+重绘+绑定事件不触发+无过渡；

（2）visibility:hidden 存在+不重排+重绘+绑定事件不触发+有过渡；

（3）opacity:0 存在+不重排+不一定重绘+触发自身绑定+有过渡；

（4）position:absolute 移除视线；

（5）z-index:负值 使用其他元素遮盖；

（6）transform:scale(0,0) 缩放元素为0 存在+绑定事件不触发。

10. Promise().then()返回的也是Promise对象，要怎么判断这个Promise对象的状态？

let p1 = new Promise(function(){
   
   })
let p2 = p1.then((resolve,reject)=>{
   
   })

• 如果p1的状态的pending，那么p2的状态也是pending；

• 如果p1的状态的resolved，then会执行resolve，那么p2的状态由resolve的返回值决定；

  • 如果resolve()的返回值不是一个prom