2025新鲜出炉--前端面试题（五）

1. vue中$nextTick的作用是什么

回答： $nextTick 是 Vue 提供的异步更新队列机制，主要作用是 确保在 DOM 更新完成后执行回调，以便操作最新的 DOM 元素。

• 使用场景：

• 数据修改后立即获取更新后的 DOM（如获取元素尺寸、滚动位置）。
• 避免因 DOM 未更新导致的操作错误（如表单验证后聚焦输入框）。
• 原理：

• Vue 将数据变更后的 DOM 更新任务放入异步队列，通过微任务（优先 Promise.then）或宏任务（降级到 setTimeout）执行。
• $nextTick 返回一个 Promise，支持 async/await 语法。

2. 能说一下浏览器中的事件循环吗

回答： 浏览器事件循环（Event Loop）是协调同步任务、宏任务（MacroTask）、微任务（MicroTask）执行的机制：

1. 执行顺序：

• 同步代码 → 微任务队列清空 → 宏任务队列取一个执行 → 重复循环。

1. 宏任务：

• setTimeout、setInterval、DOM 事件、I/O 操作。

1. 微任务：

• Promise.then、MutationObserver、queueMicrotask。 示例：

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// 输出顺序：1 → 4 → 3 → 2

3. 假设定时器设置的6s, 主线程占用了10秒, 定时器什么时候输出

回答： 定时器会在 主线程执行完毕后立即执行，即 10秒后输出。

• 原因：JavaScript 是单线程的，定时器回调需等待主线程空闲。
• 注意：定时器的时间参数表示“至少延迟多久”，而非“精确时间”。

4. H5做的多吗, 做过微信的公众号授权吗, 怎么获取微信的openId

回答： 是的，开发过 H5 和微信公众号授权流程。获取 openId 的步骤：

1. 前端引导授权：

• 跳转至微信授权页：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base

1. 后端交换 code：

• 用户授权后，微信重定向到 redirect_uri 并携带 code。
  • 前端将 code 传给后端，后端通过微信接口用 code 换取 openId。

1. 前端存储 openId：

• 将 openId 存入 localStorage 或 Cookie，用于后续业务逻辑。

5. webpack用的多吗, hash chunkhash contenthash之间什么区别

回答： 是的，常用 Webpack 构建工具。三种 hash 的区别：

• hash：基于整个项目构建生成，所有文件共享同一 hash（任一文件变化，全部文件名变化）。
• chunkhash：基于 chunk 生成，同一 chunk 内文件共享 hash（适用于缓存 JS 文件）。
• contenthash：基于文件内容生成，文件内容不变则 hash 不变（适用于 CSS 或图片缓存）。

6. webpack做过哪些优化, 具体实现细节还记得吗

回答： 常用优化手段：

1. 代码分割（Code Splitting）：

• 使用 SplitChunksPlugin 拆分公共模块。
  • 动态导入（import()）实现按需加载。

1. Tree Shaking：

• 配置 mode: 'production' 自动启用，需使用 ES Module 语法。

1. 缓存优化：

• 配置 output.filename: '[name].[contenthash].js'。
  • 使用 cache-loader 或 HardSourceWebpackPlugin 加速构建。

1. DLL 预构建：

• 将稳定第三方库（如 React、Lodash）预打包为 DLL，减少重复构建。

7. 负责过团队内部的哪些部分的技术支撑

回答： 在团队中负责以下技术支撑：

• 脚手架搭建：统一项目初始化流程，集成代码规范（ESLint、Prettier）、提交规范（Commitizen）。
• 性能监控体系：接入 Sentry 监控错误，自研页面性能采集工具。
• 组件库维护：基于 Vue/React 封装通用业务组件，提供按需加载能力。

8. 搭建一些基础组件的时候, 你会考虑哪些东西

回答： 设计基础组件的关键点：

1. 通用性：通过 Props 控制多样化的行为（如 Button 的 type、size）。
2. 可访问性（A11Y）：支持键盘导航、ARIA 属性。
3. 样式隔离：使用 CSS Modules 或 Scoped CSS 避免样式污染。
4. 文档与示例：提供清晰的 API 文档和 Demo。
5. 单元测试：覆盖核心交互逻辑（如点击、表单校验）。

9. 函数式编程你是怎么理解的, 高阶函数有用到过吗

回答：

• 函数式编程（FP）：

• 核心思想：通过纯函数（无副作用、固定输入输出）、不可变数据、函数组合解决问题。
• 优势：代码可预测、易于测试和并行化。
• 高阶函数（HOF）：

• 接收函数作为参数或返回函数的函数（如 map、filter、debounce）。

示例：

const withLogging = (fn) => (...args) => {
  console.log('Calling function:', fn.name);
  return fn(...args);
};

10. 函数柯里化有什么作用

回答： 柯里化（Currying）将多参数函数转换为单参数函数链，作用包括：

参数复用：固定部分参数，生成更专用的函数。

const add = a => b => a + b;
const add5 = add(5); // 复用 a=5
add5(3); // 8

延迟执行：分步传递参数，直到所有参数满足。

函数组合：便于组合多个函数（如 compose(f, g)(x)）。

11. 详细的介绍一下你的开源项目

回答： （此处需根据实际项目调整，以下为示例） 项目名称：Vue-Admin-Template 核心功能：

• 基于 Vue3 + Element Plus 的中后台模板。
• 集成权限管理、动态路由、数据可视化组件。 技术亮点：
• 使用 Vite 实现秒级热更新，支持按需加载。
• 通过 Mock.js 实现前后端分离开发。
• 提供 Docker 部署脚本，支持一键部署。

12. 我看你还用改nuxt开发项目, 除此之外你还了解哪些vue的ssr方案

回答： 除了 Nuxt.js，其他 Vue SSR 方案：

1. Vue 原生 SSR：
   • 基于 vue-server-renderer 手动搭建，灵活性高但配置复杂。
2. Vite + SSR：
   • 使用 vite-ssr 插件，结合 Vite 的快速构建能力。
3. Quasar Framework：
   • 全功能框架，支持 SSR、PWA、移动端等多平台。

13. 你对首屏渲染做过哪些优化

回答： 首屏优化手段：

1. 服务端渲染（SSR）：直接返回渲染好的 HTML。
2. 资源预加载：
   • <link rel="preload"> 提前加载关键资源（如字体、首屏图片）。
3. 代码分割：通过 Webpack 或 Vite 拆分非首屏代码。
4. CDN 加速：静态资源部署到 CDN，减少网络延迟。

14. vue中的mixins用过吗, 你还有其他的替代方案吗

回答： 是的，但 Mixins 有以下问题：

• 命名冲突：多个 Mixins 可能覆盖同名属性或方法。
• 隐式依赖：逻辑分散，难以追踪来源。

替代方案：

• Composition API（Vue3）：通过 setup 函数组合逻辑，更灵活且可复用。
• 自定义 Hooks：将逻辑封装为函数（类似 React Hooks）。

15. vuex有用过吗, vuex是如何实现响应式的

回答： 是的，Vuex 的响应式实现原理：

1. Vue 实例绑定：将 state 存入 Vue 实例的 data 中，利用 Vue 的响应式系统监听变化。
2. Getter 缓存：通过 computed 实现缓存，依赖的 state 变化时重新计算。
3. Mutation 同步更新：确保状态变更可追踪（Devtools 调试支持）。

16. vue的响应式是如何实现的

回答： Vue2 和 Vue3 的响应式实现差异：

• Vue2：

• 基于 Object.defineProperty 劫持对象属性的 getter/setter。
• 缺点：无法监听新增属性、数组索引变更。
• Vue3：

• 基于 Proxy 代理整个对象，支持动态新增属性和数组变化。
• 依赖收集通过 track 函数，触发更新通过 trigger 函数。

17. vue的router你用的那种, 你觉得hash相较于history会好吗

回答： 根据项目需求选择路由模式：

• Hash 模式：

• 优点：无需服务端配置，兼容性更好。
• 缺点：URL 带 #，不够美观。
• History 模式：
  • 优点：URL 简洁，更符合用户习惯。

• 缺点：需服务端配置（如 Nginx 的 try_files），否则刷新会 404。

结论：若需 SEO 友好或追求 URL 简洁，优先选择 History 模式；否则 Hash 模式更简单。