洗涮刷社招一面

原创已于 2025-08-17 23:17:36 修改 · 991 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

于 2025-08-16 17:35:10 首次发布

面试题专栏收录该内容

10 篇文章

订阅专栏

1.小程序支付的完整流程是怎样的?从页面发起到微信/支付宝侧唤起支付，再到回调通知

我参与的小程序支付项目主要基于微信支付。整个流程包括;用户点击支付按钮，前话请求后端创建订单，后端调用微信统一下单接口，返回 prepy_id和签名信息，前端再用 wx.requestPaymnent唤起支付控件。支付完成后，微信会异步通知后端，后端验证支付状态并更新订单。前端通过轮询或订阅确认支付结果，最终跳转成功页。整个链路涉及前端、后端、微信三方，安全性和状态管理尤为关键。

2.可视化大屏数据,如果数据有更新，前端怎么实时同步?

WebSocket

实现思路:
建立 WebSocket 长连接:
后端有数据变更时主动推送:
前端监听消息，更新对应组件状态。
轮询
使用 setInterval()每隔5~30 秒向后端发一次请求:
返回数据有变化则更新页面。
```
setInterval(fetchData，10888);//每10秒拉一次
```

SSE

只需服务端 → 客户端的单向数据流;

const eventsource = new Eventsource('/api/sse");
eventsource.onmessage=(e)=>{const data = JSON.parse(e.data)
updateData(data);
}

3.websocket用过吗，有遇到什么难点

是的，我有使用过WebSocket。在项目中，我主要用WebSocket实现实时数据传输，比如聊天应用和实时通知系统。

在使用WebSocket时，我遇到了一些难点：

连接管理：需要处理连接的建立、关闭和重连逻辑，确保在网络波动时能够恢复连接。

消息格式：需要统一消息的格式，确保客户端和服务器之间能够正确解析和处理消息。

安全性：在传输敏感数据时，需要考虑WebSocket的安全性，比如使用wss协议和进行身份验证。

性能优化：在高并发情况下，如何有效管理连接和消息的发送接收，避免性能瓶颈。

4.小程序有做过吗，如果某个文件设置了强缓存，但更新了资源，如何确保用户能及时获取新版本?

那么当文件内容更新时，为了确保用户拉取到新版本，我们通常采用构建时文件名加 hash 的方式来控制缓存失效。
推荐做法:文件名加 content hash(强缓存 +自动更新)
示例:

/dist/js/app.abc123.js -构建时内容不同，hash 不同
/dist/js/app.def456.js -改动后生成新 hash，浏览器拉新文件

每次打包构建时，JS/CSS/图片文件都会根据内容生成 hash
浏览器缓存旧的 abc123.js，但index.html引用了新的 def456.js，就会自动拉取最新版本

这种方式兼顾强缓存 +自动更新，是绝大多数前端项目采用的方案(Webpack、Vite 等构建工具默认支持)

核心链路是:

1.main.js 设置了强缓存，带有hash(如main.abc123.js)

2.index.html 不缓存(或短缓存)
3.每次发布时:
构建产物生成新 hash文件名(如 main.def456.js)

index.html 引l用新的资源路径
4.用户刷新页面时重新请求 index.htm1 ，浏览器拉取新 JS 文件 →6自动命中新版本

额外补充:如何确保 index.html 也能更新?
给index.html 设置:

Cache-Control: no-cache

5.小程序页面白屏问题，怎么去解决，怎么去复现，怎么去排查，可能是出现某些特定的场景下，比如说有的用户出现白屏，有的用户不会

1.第一时间感知问题:
使用前端监控工具(如 Sentry、Fundebug)和日志上报机制。
配置报警通知，实时接收错误消息。

2.快速处理错误:
为白屏提供全局错误边界或回退页面。
捕获并处理运行时异常

3.定位井修复:
结合本地复现、线上日志和用户反馈，找到问题根因。

通过系统化的监控和错误处理机制，可以显著提升页面的稳定性和用户体验，同时快速响应和修复问题。

6.vue2和vue3的区别

Vue2是使用object.defineproperty来做的，
在页面刚开始加载时，Vue会遍历data中的所有属性，
然后使用object.defineproerty把这些属性全部转为getter/setter，
当用户访问或修改某个属性时会触发对应的getter/setter方法，然后会通知每个组件实例对应的watch方法，
最后实现视图的更新。

defineproperty的缺点：
1.对于复杂对象需要深度监听，一次性监听到底，它的计算量是非常大的，性能也是不太好的
2.对于新增、删除操作是无法监听的，需要使用到Vue.set和Vue.set和Vue.set和Vue.delete来作为辅助
3.需要重写数组的原生方法来实现数组的监听

所以Vue3使用proxy代替Vue2的defineproperty。

proxy的优势：
1.它可以监听整个对象，而不需要遍历监听属性，性能会有所提升
2.它可以直接监听数组的变化，而不需要重写数组的原生方法，它的便利性会增加很多
3.它有多达13种拦截方法，所以它的功能会更强大
4.proxy作为一个新标准，它会收到浏览器厂商持续的性能优化，也就是它会享受到传说中的新标准的性能红利。

解题思路：
1.Vue2是怎么做的？
2.Vue2这种方法有什么问题?
3.Vue3是怎么做的？
4.Vue3又是怎么解决Vue2的这些问题？

7.a标签和link标签的区别

a标签

点击a标签从当前页面跳转到另一个页面
通过a标签跳转，页面就会重新加载，相当于重新打开了一个网页

link标签

通过router-link进行跳转不会跳转到新的页面，不会重新渲染，它会选择路由所指的组件进行渲染

8.解决跨域问题

CORS 是解决跨域问题的最主流、标准的方式。通过在服务器端配置Access-control-Allow-0rigin 等HTTP 响应头，允许特定的源访问资源,
JSONP
代理服务器
Nginx 反向代理
WebSocket 是一种全双工通信协议，它不受同源策略的限制，因此可以用于跨域通信。

9.小程序支付的完整流程是怎样的?从页面发起到微信/支付宝侧唤起支付，再到回调通知

我参与的小程序支付项目主要基于微信支付。整个流程包括;用户点击支付按钮，前话请求后端创建订单，后端调用微信统一下单接口，返回 prepy_id和签名信息，前端再用 wx.requestPaymnent唤起支付控件。支付完成后，微信会异步通知后端，后端验证支付状态并更新订单。前端通过轮询或订阅确认支付结果，最终跳转成功页。整个链路涉及前端、后端、微信三方，安全性和状态管理尤为关键。

10.小程序的图片、图标、视频文件你们存在哪里

11.小程序图片上传提交审核的时候，设置体积大小为2M

12.防止重复提交，防止重复点击

使用防抖/节流机制限制用户频繁点击秒杀按钮:
防抖:用户点击后立即禁用按钮，等响应返回后再解禁，
节流:限制短时间内多次点击，仅处理第一次或固定间隔内的请求。
设计友好的交互提示:
点击按钮后立即展示“正在提交”状态，避免用户以为点击失败而重复操作
通过实时更新倒计时、库存状态等信息保持用户与系统的互动，

14.闭包的优缺点，什么场景下用到

闭包是什么：JS中内层函数可以访问外层函数的变量，外层函数无法操作内存函数的变量的特性。我们把这个特性称作闭包。

闭包的好处：

隔离作用域，保护私有变量；有了闭包才有局部变量，要不然都是全局变量了。
让我们可以使用回调，操作其他函数内部；
变量长期驻扎在内存中，不会被内存回收机制回收，即延长变量的生命周期；

闭包的弊端：内层函数引用外层函数变量，内层函数占用内存。如果不释放内存，过多时，易引起内存泄露。

解决办法：无法自动销户，就及时手动回收，使用后将函数的引用赋null。

15.浏览器与服务器的交互

三次握手确保连接建立可靠，四次挥手确保连接断开完整。三次是为了防止旧连接误开启，四次是因为TCP是双向关闭，每个方向都要FIN+ACK。

三次握手

Client            server
//请求连接
// 同意并回应
//确认连接建立

四次挥手

Client            server
//我要断开连接
//收到请求，等我处理完
//好了，我也断开了
//确认断开

16.ES5和ES6的区别

ES6(ES2015)是JavaScript 的一次重要升级，相比 ES5 提供了很多语法和功能层面的新特性，我在项目中常用的有以下几个:

1.块级作用域:let 和 const

替代 var，解决变量提升和作用域污染问题;
const 用于定义常量不可重新赋值，
实际项目中我默认用const需要修改时才用 let

2.箭头函数

简化函数写法;
自动绑定 this，常用于事件回调、数组操作等;

3.解构赋值

更方便地从对象或数组中提取变量;
配合函数参数结构体使用频率很高，

4.模板字符串

支持变量插入和多行字符串，避免字符串拼接混乱;

5.模块化:import/export

实现 ES 模块机制;

6.Promise 异步编程

提供更优雅的异步写法，避免回调地狱;
我通常在封装请求或并发控制时使用。

7.展开运算符/剩余参数(…)

对象/数组拷贝、合并、函数参数处理都非常方便: