前端八股文面经大全：来未来前端实习一面（2026-04-17）·面经深度解析

前言

大家好，我是木斯佳。

相信很多人都感受到了，在AI浪潮的席卷之下，前端领域的门槛在变高，纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享，如今也沉寂了许多。但我们都知道，市场的潮水退去，留下的才是真正在踏实准备、努力沉淀的人。学习的需求，从未消失，只是变得更加务实和深入。

这个专栏的初衷很简单：拒绝过时的、流水线式的PDF引流贴，专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上，尝试从面试官的角度去拆解问题背后的逻辑，而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招，目标是中大厂还是新兴团队，只要是真实发生、有价值的面试经历，我都会在这个专栏里为你沉淀下来。专栏快速地址

温馨提示：市面上的面经鱼龙混杂，甄别真伪、把握时效，是我们对抗内卷最有效的武器。

面经原文内容

📍面试公司：来未来
🕐面试时间：近期
💻面试岗位：前端实习一面

❓面试问题：

1. JavaScript 中的闭包是什么，应用场景及缺点、处理方法？
2. JavaScript 常用的基础类型有哪些？
3. 前端的垃圾回收机制是什么？
4. 请介绍 JavaScript 的事件循环（同步任务、微任务、宏任务的执行顺序及示例）？
5. Promise 和 setup 哪个先执行？
6. Vue 2 和 Vue 3 的区别（响应式实现、生命周期、API、根节点）？
7. Vue 2 和 Vue 3 中 v-if 和 v-for 的优先级区别及调整原因？
8. Vue 中 watch 和 computed 的区别？
9. Vue 3 setup 语法糖中 ref 和 reactive 的区别？
10. Promise 的工作原理（状态、不可逆性、结果获取方式）？
11. Promise 与 Async/Await 的关系及使用规则？
12. 跨域的机制及解决方案？
13. POST 和 GET 请求方式的区别？
14. HTTP 的缓存机制有哪些（强制缓存、协商缓存的逻辑）？
15. 项目与封装组件的依据、需求场景及难点？

来源：牛客网 寻觅美妙实习中🔥

💡木木有话说（刷前先看）

来未来这场实习一面，是一份非常标准的前端基础面经。适合校招/实习同学用来检验基础是否扎实。难度不大，作为补充。

📝 来未来前端实习一面·深度解析

🎯面试整体画像

🔍逐题深度解析

一、JavaScript闭包：定义、应用、缺点及处理

定义：函数可以访问其外部作用域的变量，即使外部函数已执行完毕。

应用场景：

• 防抖/节流（保存timer）
• 模块化封装（私有变量）
• 循环中保存正确索引
• 函数工厂

缺点：

• 内存泄漏：闭包引用的外部变量不会被垃圾回收，尤其当引用大对象或DOM元素时

处理方法：

• 及时解除引用：fn = null
• 避免在闭包中引用不必要的大对象
• 使用WeakMap/WeakSet存储弱引用

// 内存泄漏示例及修复functionleak(){constlargeData=newArray(1000000)constbtn=document.getElementById('btn')btn.onclick=()=>console.log(largeData.length)// 修复：btn.onclick = null 或 避免引用largeData}

二、JavaScript常用的基础类型

7种基础数据类型：

• number
• string
• boolean
• null
• undefined
• symbol（ES6）
• bigint（ES2020）

1种引用类型：object（包含数组、函数、日期、正则等）

区别：基础类型存栈（值），引用类型存堆（地址）。

三、前端的垃圾回收机制

核心机制：可达性（Reachability）

引用计数（已不常用）：

• 记录每个对象被引用的次数，为0时回收
• 问题：循环引用导致无法回收

标记-清除（Mark-Sweep，主流）：

1. 标记阶段：从根对象（window、global）出发，标记所有可达对象
2. 清除阶段：回收未被标记的对象

优化算法：

• 分代回收：新生代（存活短）和老生代（存活长）分开处理
• 增量标记：标记过程分批执行，减少停顿
• 空闲时间回收：requestIdleCallback时机执行

// 避免内存泄漏的做法letobj={name:'Tom'}letarr=[obj]obj=null// 解除引用，但arr仍引用，对象不会被回收arr=null// 全部解除，对象可被回收

四、事件循环（同步、微任务、宏任务）

执行顺序：

1. 执行所有同步代码
2. 清空微任务队列（Promise.then、MutationObserver、queueMicrotask）
3. 执行一个宏任务（setTimeout、setInterval、I/O、UI渲染）
4. 重复2-3

console.log('1')// 同步setTimeout(()=>console.log('2'),0)// 宏任务Promise.resolve().then(()=>console.log('3'))// 微任务console.log('4')// 同步// 输出：1,4,3,2

五、Promise和setup哪个先执行

答案：setup先执行。

原因：

• setup是Vue3组件初始化的同步函数，在组件实例创建时立即执行
• Promise的回调（.then）是微任务，在当前同步代码执行完后才执行

执行顺序示例：

<script setup> console.log('1: setup开始') Promise.resolve().then(() => console.log('3: Promise.then')) console.log('2: setup结束') </script> // 输出：1,2,3

注意：如果setup中有await，被await后面的代码会变成微任务，但setup函数本身是同步执行到第一个await。

六、Vue 2 和 Vue 3 的区别

七、v-if 和 v-for 的优先级区别及调整原因

调整原因：

• Vue 2中v-for优先级高，即使大部分元素需要被过滤，也会先遍历整个列表，性能差
• Vue 3调整为v-if优先，先过滤再循环，更符合开发者直觉，性能更好

最佳实践：避免在同一元素上同时使用，应使用计算属性先过滤列表。

<!-- ❌ 不推荐 --> <div v-for="item in list" v-if="item.visible" :key="item.id"> <!-- ✅ 推荐 --> <div v-for="item in visibleList" :key="item.id">

八、watch 和 computed 的区别

// computed：缓存派生值constfullName=computed(()=>`${firstName.value}${lastName.value}`)// watch：监听变化执行异步操作watch(searchKeyword,async(newVal)=>{constresults=awaitsearchAPI(newVal)searchResults.value=results})

九、ref 和 reactive 的区别

constcount=ref(0)// 基本类型用refconststate=reactive({count:0})// 对象用reactive// 访问count.value++state.count++// ref的自动解包（在模板中）<template>{{count}}</template>// 无需.value

十、Promise的工作原理

三种状态：

• pending：初始状态
• fulfilled：成功（调用resolve）
• rejected：失败（调用reject）

特点：

1. 状态不可逆：一旦从pending变为fulfilled或rejected，不能再改变
2. 结果获取：通过.then(onFulfilled, onRejected)或.catch()获取
3. 链式调用：.then返回新Promise，支持链式
4. 微任务：.then回调放入微任务队列

newPromise((resolve,reject)=>{setTimeout(()=>resolve('success'),1000)}).then(res=>console.log(res))// 微任务.catch(err=>console.error(err))

十一、Promise与Async/Await的关系及使用规则

关系：

• async/await是Promise的语法糖，让异步代码写得更像同步
• async函数返回Promise
• await后面跟Promise，会暂停函数执行，等待Promise resolve

使用规则：

1. await只能在async函数内部使用（顶层await需ES2022）
2. async函数返回的Promise会自动包裹返回值
3. 错误处理用try/catch或.catch()

// 等价的两种写法// PromisefunctiongetData(){returnfetch('/api/data').then(res=>res.json()).catch(err=>console.error(err))}// async/awaitasyncfunctiongetData(){try{constres=awaitfetch('/api/data')returnawaitres.json()}catch(err){console.error(err)}}

十二、跨域的机制及解决方案

跨域原因：浏览器同源策略（协议、域名、端口任一不同即跨域），限制脚本间交互。

解决方案：

// CORS服务端响应头Access-Control-Allow-Origin:https://example.com Access-Control-Allow-Methods:GET,POST,PUTAccess-Control-Allow-Headers:Content-Type

十三、POST 和 GET 的区别

注意：GET请求也可以带Body，但约定上不应这样做。

十四、HTTP缓存机制

分类：

流程图：

请求 → 检查强缓存 → 未过期 → 使用缓存 ↓ 过期 → 发送协商缓存请求 → 304 → 使用缓存 ↓ 200 → 更新缓存

Cache-Control常用指令：

• max-age=3600：缓存1小时
• no-cache：每次都协商缓存（验证后再用）
• no-store：完全不缓存
• public：允许被任何中间节点缓存
• private：只允许浏览器缓存

十五、项目与封装组件的依据、需求场景及难点

回答思路：结合项目实际，说明封装组件的决策过程。

封装依据：

• 复用性：同一UI/逻辑在多个地方使用（≥2次）
• 复杂度：单个组件代码超过200行，考虑拆分
• 单一职责：组件只做一件事，便于维护
• 业务边界：独立业务模块（如商品卡片、评论列表）

需求场景：

• 表单输入框（带校验、错误提示）
• 弹窗/对话框（确认、取消、自定义内容）
• 表格（分页、排序、筛选）
• 列表项（统一样式、交互）

难点：

• Props设计：既要灵活（支持多种场景），又不能太复杂
• 插槽设计：哪些部分可自定义（标题、内容、底部）
• 状态管理：组件内部状态与外部传入状态的协调
• 性能：避免不必要的重渲染（使用v-memo/React.memo）
• 文档与示例：让团队成员知道如何使用

// 一个好的组件设计示例<FormInput v-model="username"label="用户名":rules="[required, minLength(3)]"placeholder="请输入用户名"><template #prefix>👤</template><template #suffix><Tooltip content="用户名只能包含字母数字"/></template></FormInput>

📚知识点速查表

📌 最后一句：

没啥好说的，比较基础，典型八股