项目面试题

前端踩bug工程师
46 阅读17分钟

1.为什么选择 Vue3 + TypeScript 开发后台管理系统？

  • Vue3 的 Composition API 更适合复杂逻辑拆分（如数据看板、多条件筛选），比 Options API 更易维护；
  • TypeScript 提供静态类型检查，减少因数据结构变更导致的 bug（尤其后台涉及大量表单和接口数据）；
  • 配合 Vite 实现快速热更新，提升开发效率；
  • 生态成熟（如 Pinia 状态管理、VueRouter 路由控制），适合后台系统的复杂场景

2、权限控制

  1. 后台系统如何实现细粒度的权限控制（页面、按钮、接口）？

    • 页面级权限：基于用户角色动态生成路由表，无权限的路由不注册（配合 router.addRoute），并在导航守卫中拦截越权访问；
    • 按钮级权限：封装 PermissionButton 组件，通过权限码判断是否渲染（如 <PermissionButton auth="user:delete">删除</PermissionButton>）；

image.png

*   **接口级权限**：请求拦截器中携带令牌（Token），后端验证权限，前端根据返回的 403 状态提示无权限；
*   权限数据通常由后端返回（如 `{ roles: ['admin'], permissions: ['user:add', 'user:delete'] }`），前端缓存至 Pinia 或 localStorage。

2. 动态路由的实现原理是什么？

*   登录后获取用户权限列表，与预设的 “路由表”（包含所有路由）匹配，筛选出用户有权访问的路由；
*   通过 `router.addRoute` 动态添加路由，并处理嵌套路由（需递归添加）；
*   解决刷新后动态路由丢失：将权限数据缓存，刷新时重新执行动态路由生成逻辑。

3.数据处理与交互

  1. 如何设计一个通用的表格组件（支持排序、筛选、分页、自定义操作）？

    • 核心 props：columns（列配置）、data（数据）、pagination（分页配置）、loading（加载状态）；
    • 封装排序 / 筛选逻辑：通过 @sort-change @filter-change 事件触发接口请求，参数自动拼接；
    • 自定义操作：允许通过 slot 传入操作按钮（如编辑、删除），保持组件灵活性；

image.png

  1. 大量数据（如 10 万条）的表格如何优化性能？

    • 虚拟滚动：仅渲染可视区域的行（如 vue-virtual-scroller），减少 DOM 节点数量；
    • 分页加载：默认只加载第 1 页数据（如 10 条 / 页），通过分页器触发后续加载；
    • 数据缓存：缓存已加载的分页数据，避免重复请求；
    • 避免频繁重绘：减少表格内的复杂计算属性，使用 v-memo 缓存静态内容。

4.状态管理与接口请求

  1. 后台系统中，Pinia 比 Vuex 好在哪里？

    • 无需 mutations，直接通过 actions 修改状态，代码更简洁；
    • 原生支持 TypeScript，类型推断更友好（定义 State 接口后自动提示）；
    • 模块化更灵活（每个 store 都是独立模块，无需 modules 嵌套）；
    • 支持组合式 API，可在 setup 中直接使用，与 Vue3 生态更契合。

  2. 如何封装接口请求（Axios）以适应后台系统的需求？

    • 统一配置：设置基础 URL、超时时间、请求头（如 Token）；

    • 拦截器处理：

      • 请求拦截器：添加 Token，处理请求参数序列化；
      • 响应拦截器：统一解析后端返回格式（如 { code, data, msg }），处理错误码（如 401 跳转登录、500 提示服务器错误）；

    • 封装请求方法：按模块导出（如 userApi.login()），自动携带模块前缀（如 /api/user）；

    • 取消重复请求：通过 CancelToken 取消未完成的同接口请求（如用户频繁点击查询按钮）。 5.性能优化

  3. 后台系统首屏加载慢，如何优化？

    • 代码分割：路由懒加载（() => import('@/views/user')），减小初始包体积；
    • 按需引入：UI 组件库（如 ant-design-vue）使用按需导入（配合 unplugin-vue-components），避免全量引入；
    • 静态资源优化：图片压缩、使用 CDN 加速，大体积资源（如图表库）异步加载；
    • 缓存策略：通过 workbox 实现 Service Worker 缓存静态资源，接口数据使用 localStorage 或 sessionStorage 缓存（非敏感数据）。

  4. 如何减少后台系统中的重复渲染（如表单与表格联动时）？

    • 使用 v-memo 缓存不常变化的元素（如表格表头、静态文本）；
    • 合理设计状态粒度：避免将所有数据放在同一个 ref 中，拆分独立状态（如表单数据和表格数据分开存储）；
    • 计算属性优化：使用 computed 缓存依赖结果，避免每次渲染重新计算；
    • 事件防抖节流：对频繁触发的事件（如搜索输入、窗口 resize）使用 lodash.debounce 或 lodash.throttle。

6.用户体验

  1. 如何设计后台系统的表单，提升用户填写效率？

    • 实时校验：输入时即时提示错误（而非提交后），减少用户等待；
    • 联动逻辑：如 “省份选择后自动加载城市列表”，避免无效操作；
    • 批量操作：支持表单数据批量导入（如 Excel 上传）、批量编辑；
    • 保存策略：自动保存草稿（定时或监听输入事件），防止意外刷新导致数据丢失；
    • 反馈清晰：提交成功 / 失败有明确提示（如顶部通知、表单内错误标红）。

  2. 后台系统如何实现主题切换（如亮色 / 暗色模式）？

    • CSS 变量：定义主题变量（如 --primary-color），通过切换类名（如 <html class="dark">）修改变量值；
    • Less/Sass 混入：使用预处理器的 mixin 和 @import 加载不同主题样式；
    • 状态持久化：将用户选择的主题保存在 localStorage，刷新后自动应用；
    • 适配第三方组件：确保 UI 库（如 ant-design-vue）的组件能跟随主题切换（通常需配置主题变量覆盖）。

7.工程化与部署

  1. 如何保证后台系统的代码质量？

    • 代码规范：通过 ESLint + Prettier 强制统一代码风格，配合 Husky 在提交前校验；
    • 类型检查：TypeScript 严格模式（strict: true），避免 any 类型滥用；
    • 单元测试：对核心工具函数、组件编写测试（如 Jest + Vue Test Utils）；
    • 代码审查：通过 Git 工作流（如 PR/MR）进行代码 review，避免低级错误。

  2. 后台系统的部署流程是怎样的？如何实现灰度发布？

    • 部署流程：代码提交 → CI 构建（如 GitHub Actions）→ 测试环境验证 → 生产环境部署（如 Docker + Nginx）；

    • 灰度发布：

      • 前端：通过 Nginx 配置按比例分发流量（如 10% 用户访问新版本），或基于用户 ID 定向推送；
      • 配合后端：使用特性开关（Feature Toggle）控制新功能是否展示，便于快速回滚。

项目代码：

表格组件

list.vue 是一个高度可复用的表格列表组件（基于 Ant Design Vue 组件），把“搜索表单 + 列控制 + 表格 + 分页 + 新增/编辑抽屉”组合封装起来。它通过一个 metaDta prop 将业务差异化（columns、接口、表单字段等）注入，核心的行为（获取数据、翻页、导出、增删改）通过 metaDta 中的 API 函数以及从 useInitTable 返回的方法完成。

可复用点 / 设计亮点

  • 将所有表格差异配置化到 metaDta，使组件可被多处复用。
  • useInitTable hook 封装了大量列表逻辑（分页、排序、远程请求、columns 管理），降低组件复杂度。
  • defineExpose 允许父组件通过 ref 以编程方式控制列表（非常实用）。
  • 列过滤与拖拽排序模块化（ColFilter + dragTableCol），支持用户可视化定制表格。

是一个高度封装的通用列表组件，采用 组件化+配置化 设计模式，主要包含以下核心部分：

  • 搜索区域（Search + SearchItem）
  • 表格区域（a-table + 自定义列）
  • 操作按钮区（新增/编辑/删除）
  • 分页控件
  • 数据加载与状态管理

1.动态配置能力

通过 metaDta 属性实现全量配置，包括： 可配置项包括：搜索表单结构、表格列定义、API接口地址、权限控制等，实现了"一份代码，多场景复用" // 配置示例（从props传入） props: { metaDta: { type: Object, required: true } }

2.组件组合策略

采用 容器组件+展示组件 模式：

  • 内置子组件： , ,
  • 自定义插槽：支持表格操作列、顶部按钮区等个性化扩展

3.数据逻辑封装

使用 useInitTable hooks封装核心业务逻辑：

组件通过配置驱动、逻辑分层、接口标准化的设计，实现了在管理系统中的高度复用，适合快速构建各类数据列表页面。

  • Props

    • defineProps(["metaDta", "showOtherInfo", "formState", "putType"])
    • metaDta 是主要配置对象（详见后文“metaDta 约定”）。

  • Emits

    • defineEmits(["getSelectedRowKeys"]) — 当选中行变化时发出选中 key。

  • defineExpose（父组件可以通过 ref 调用的方法）

    • getData
    • onSelectChange 示例：父组件可以

  • 在模板上使用 <List ref="listRef" :metaDta="...">

  • 在脚本中使用 this.$refs.listRef.getData() 或（composition）listRef.value.getData()。

主要实现点与行为流（运行时）

  • useInitTable hook

    • 组件使用 useInitTable（imported from @/utils/useCommon.js）封装数据获取、分页、排序、columns 等。组件从该 hook 得到：searchForm, resetSearchForm, scrollX, columns, columnsAll, tableData, summaryData, loading, getData, handleChangePage, total, limit, currentPage, exportData, getSearchFormParams 等。
    • 核心网络/数据行为由 props.metaDta.listApi、props.metaDta.listTotalApi 等注入。

  • 搜索表单

    • formMetaFilter computed 由 props.metaDta.formMeta 过滤掉隐藏项生成。
    • 搜索控件类型支持：input, inputNumber, textarea, select (enum-select), select-spec, dateRange, dateTimeRange 等。
    • searchFormFunc → 调用 getData(1) 发起请求。

  • 表格行为

    • columns 由 useInitTable 和 colFilter 控制。ColFilter 用于列显示切换，changeColumsOptionsEmit 将选中列 title 映射回 columns。
    • 支持：行选择（tableRowSelection computed）、拖拽列排序（通过 dragTableCol 的 createSort/destorySort）、列宽调整（@resizeColumn -> handleResizeColumn 工具）。
    • 自定义 bodyCell 插槽处理 action 列。对编辑、删除按钮进行了权限/上下文检查（checkIfIsMine, isToushouPage, 等）。

  • 分页

    • 使用 a-pagination，pageSize 绑定到 limit，currentPage 绑定到 currentPage。

  • 事件总线与生命周期

    • onMounted：订阅 eventBus 的若干事件（清空选中行、根据 colFilterKey 强制渲染、切换表格换行行为）
    • onUnmounted：销毁拖拽排序（destorySort）
    • onActivated/onDeactivated：用于 keep-alive 时控制表格渲染显示（isActived）。

  • watch(tableData)：当 tableData 改变，刷新列过滤和 createSortFunc。

  • 处理新增/编辑/复制/删除

    • handleAdd 打开 addRef（Add 组件）。
    • handleEdit、handleCopy：打开编辑 drawer 并通过 editRef.value.setData() 填充数据（假设 Add 组件提供 setData）。
    • handleDelete：调用 props.metaDta.deleteApi({ id: ... })，操作成功后通知并刷新。

  • 导出

    • handleExportCSV 使用 hook 的 exportData 并可能透传 props.metaDta.exportApiUrl。

list.vue 组件封装分析 1. 整体架构设计

list.vue 是一个高度封装的通用列表组件，采用 组件化+配置化 设计模式，主要包含以下核心部分：

  • 搜索区域（Search + SearchItem）
  • 表格区域（a-table + 自定义列）
  • 操作按钮区（新增/编辑/删除）
  • 分页控件
  • 数据加载与状态管理 2. 核心封装特性 2.1 动态配置能力 通过 metaDta 属性实现全量配置，包括：
// 配置示例（从props传入）
props: { metaDta: { type: Object, required: 
true } }

可配置项包括：搜索表单结构、表格列定义、API接口地址、权限控制等，实现了"一份代码，多场景复用" 2.2 组件组合策略 采用 容器组件+展示组件 模式：

  • 内置子组件： , ,
  • 自定义插槽：支持表格操作列、顶部按钮区等个性化扩展
<slot name="slotButtons" :myRecord="record" 
:myColumn="column"></slot>
``` 2.3 数据逻辑封装
使用 useInitTable hooks封装核心业务逻辑： `useInitTable`

const {   searchForm,   resetSearchForm,   columns,   tableData,   loading,   getData,   handleChangePage,   total } = useInitTable({   searchForm: {...},   getList: props.metaDta.listApi,   columns: props.metaDta.columnsMeta });

实现了多层级权限控制：

- 行级别权限： checkIfIsMine(record) 判断数据归属
- 操作权限：基于用户角色动态显示编辑/删除按钮
- 功能权限：通过 metaDta 配置隐藏特定按钮 3. 关键技术实现 3.1 表格功能增强
- 列拖拽排序：基于 dragTableCol.js 实现
- 列过滤：通过 <ColFilter> 组件实现动态列显示控制
- 行样式自定义： setRowClassName 实现条件样式 3.2 性能优化
- 表格懒加载与虚拟滚动
- 数据缓存与状态管理
- 组件激活/失活状态控制

onActivated(() => { isActived.value =  true }) onDeactivated(() => { isActived.value =  false })

- 水印功能：基于用户信息动态生成
- 操作反馈：加载状态、成功/失败提示
- 表单联动：搜索条件动态显示/隐藏 4. 对外接口设计
通过 defineExpose 暴露核心方法：

defineExpose({   getData,   onSelectChange,   handleExportCSV,   getTableDataVal });

允许父组件直接调用列表刷新、数据导出等功能。
 5. 样式封装
采用scoped+less实现样式隔离，同时支持主题定制：

<style scoped lang="less"> .table-striped { background-color:  #f7f8fa; } .table-tips { background-color: #fff8e6; } /* 更多样式... */

该组件通过配置驱动、逻辑分层、接口标准化的设计，实现了在管理系统中的高度复用，适合快速构建各类数据列表页面。

Form表单组件

add.vue 是一个通用的新增/编辑表单组件，与 list.vue 配合使用，实现数据的增删改查完整流程。采用 配置驱动 设计模式，通过传入 metaDta 属性动态渲染表单内容。 add.vue 是一个通用的「新增/编辑/复制」表单抽屉（modal）组件，配合 list.vue 使用。它以 metaDta 为驱动渲染表单项（metaDta.addFormMeta），并通过注入的 API（metaDta.addApi / updateApi / copyApi）完成提交。组件还封装了文件上传（多种上传组件）、特殊业务校验与回调通知。

动态表单生成 基于配置元数据 addFormMeta 动态渲染多种表单控件：支持输入框、下拉选择、日期选择器、开关等15+种表单控件类型，并通过 specailType 属性实现特殊业务逻辑的表单项。 状态管理 使用 useInitForm hooks封装表单核心逻辑：

add.vue 组件封装分析

  1. 整体功能定位 add.vue 是一个通用的新增/编辑表单组件，与 list.vue 配合使用，实现数据的增删改查完整流程。采用 配置驱动 设计模式，通过传入 metaDta 属性动态渲染表单内容。

  2. 核心封装特性 2.1 动态表单生成 基于配置元数据 addFormMeta 动态渲染多种表单控件：

<template v-for="(item, key) in props. metaDta.addFormMeta">      <a-form-item v-if="item.type == 'input'"    :name="key" :label="item.label"    :rules="item.rule">     <a-input v-model:value="form[key]"/>         <a-form-item v-if="item.type == 'select'">     <enum-select v-model:id="form[key]"      :type="item.enumSelectType"/>       

支持输入框、下拉选择、日期选择器、开关等15+种表单控件类型，并通过 specailType 属性实现特殊业务逻辑的表单项。
 2.2 表单状态管理
使用 useInitForm hooks封装表单核心逻辑： `useInitForm`

const {   formModalRef,   formRef,   form,   rules,   isOpen,   handleSubmit,   handleCreate,   handleEdit } = useInitForm({   form: { id: undefined, ...props.metaDta.   addForm },   rules: {},   getData, });

实现表单初始化、数据绑定、验证、提交等完整生命周期管理

画布fabric.js

  • 项目通过“预解码+合成完整帧 + 把定时器放到 Worker + 主线程只做绘制 + 视频元素复用与集中 30fps 渲染调度 + 严格清理”这些手段，尽量把昂贵的计算/定时移出主渲染逻辑并减少资源重复创建，从而缓解视频与 GIF 的卡顿。

  • 预解码 + 缓存帧：把 GIF 全部帧用 ImageData 预先解码并保存在内存，播放时直接把像素写入 canvas，避免逐帧解码开销（见 addAnimatedGif / addImage.vue）。

  • 合成处理 disposal 保持每帧完整像素：使用临时 canvas 累积前帧（处理 disposal）再复制为完整帧，解决颜色/透明度丢失问题（见同上）。

  • 将定时器移到 Web Worker：用 Worker 来做帧计时/索引（只传索引到主线程），把时间敏感的 setInterval 放到 worker 中，主线程只做绘制 -> 减少主线程定时器竞争导致的卡顿（见 worker 创建与 postMessage 逻辑）。

  • 主线程高效更新帧：worker 发索引后，主线程用 fabricCtx.putImageData(...) + fabricImg.setElement(...) 并调用 fabricImg.canvas.requestRenderAll() / canvas.requestRenderAll() 来触发渲染（见 worker.onmessage 处理）。

  • 只在对象上 canvas 存在时启动动画：等待 fabricImg.canvas 或 added 事件后才启动动画，避免在未加入画布时浪费资源或产生 race。

  • 内存与安全保护：限制最大帧数（<=100）、在对象移除时彻底清理（terminate worker、清空 frames、置 canvas 尺寸为 0、clearTimeout 等），防止长期累积导致卡顿或内存泄露。activeGifAnimations 用于管理定时器/状态。

    • 代码位置：activeGifAnimations 和 dispose 清理逻辑：src/views/home/liveStreamingCanvas/addImage.vue。

  • 视频专用：对视频对象采取渲染调度、复用、预加载和集中刷新策略：

    • 恢复/反序列化时为视频创建隐藏的 video DOM（autoplay/loop/muted），并把元素记录以便统一清理，避免频繁创建/销毁 DOM（见 fromObjectFunc / liveStreamingCanvas.ts）。
    • 使用视频池复用 video 元素，addVideo 代码会等待 readyState（metadata/loaded）再添加到 canvas，减少播放中断（见 addVideo / index.vue）。
    • 为视频统一触发渲染：如果画布包含视频，项目启动一个固定间隔的渲染循环（30fps 基础频率），只要有 videoSrc 的 image 对象就触发 canvas.requestRenderAll，保证视频帧更新平滑（见 ensureVideoRendering / liveStreamingCanvas.ts）。
    • 可暂停/统一管理：提供 pauseAllVideosFunc 等工具在切换/卸载时暂停与清理，避免后台持续占用资源（见 pauseAllVideosFunc / liveStreamingCanvas.ts）。

  • 其他辅助措施：页面 visibilitychange 恢复时强制一次 render，鼠标移出画布取消选中以减少不必要的渲染（见 initListeners 与 visibility 相关处理）。

项目通过多重优化策略解决视频和GIF卡顿问题，主要包括以下几个方面：

1. 视频缓存机制

使用IndexedDB实现视频本地缓存，减少网络请求延迟：

2. 渲染调度优化

通过定时器和requestAnimationFrame确保稳定帧率：

  • 设置30fps的基础渲染频率，匹配大多数视频的帧率需求
  • 使用requestAnimationFrame进行视频帧更新，与浏览器刷新同步
  • 页面可见性变化时强制刷新渲染，解决切回页面时的卡顿

3. Web Worker分离计算

将视频定时器逻辑移至Web Worker，避免主线程阻塞：

4. 资源管理优化

  • 对象复用 ：视频和GIF元素创建后复用，避免频繁DOM操作
  • 按需渲染 ：仅对可见对象进行渲染更新
  • 层级优化 ：通过zIndex控制渲染顺序，减少重绘区域
  • 事件解绑 ：组件销毁时清理事件监听和定时器，防止内存泄漏

5. 双重缓存策略

同时实现VideoCache和VideoStorage两套缓存机制：

  • VideoCache：处理视频下载与临时缓存，7天自动过期
  • VideoStorage：提供持久化存储，支持手动管理缓存资源 这些优化措施从网络请求、渲染调度、线程管理和资源复用多个层面协同工作，有效解决了视频和GIF在画布中的卡顿问题。

image.png

image.png

  const pauseHandler = () => {
    renderVideoWorker?.postMessage({ action: 'stop', id: workerId });
  };

  video.addEventListener('play', playHandler);
  video.addEventListener('pause', pauseHandler);

  cleanupFns.push(() => {
    renderVideoWorker?.postMessage({ action: 'stop', id: workerId });
    renderVideoWorker?.removeEventListener('message', workerHandler);
    video.removeEventListener('play', playHandler);
    video.removeEventListener('pause', pauseHandler);
    renderVideoWorkerMap.delete(video);
  });

image.png

如何让gif动画动起来

1. GIF解析与帧提取

核心思路是“预解码并缓存完整帧 + 将定时调度放到 Web Worker（只发索引） + 主线程高效地用 putImageData 绘制并触发 Fabric 渲染”，从而减少主线程解码与定时开销，缓解卡顿。

1.使用 omggif 库解析GIF文件，提取帧数据和延迟信息：

image.png

  • 解析GIF获取宽高、帧数等基本信息
  • 根据帧处置方式（disposal method）处理透明区域
  • 存储每一帧的ImageData和延迟时间

2. Web Worker驱动动画

使用Web Worker避免主线程阻塞，精确控制帧间隔：

  • 创建专用Web Worker处理帧定时器
  • 根据GIF帧延迟动态调整间隔时间
  • 通过postMessage触发帧更新

3. Fabric.js对象更新

通过更新canvas元素实现动画效果：

  • 将当前帧的ImageData绘制到fabricCanvas
  • 更新fabric.Image的元素并标记为脏数据
  • 调用requestRenderAll()触发画布重绘

4. 资源管理与优化

  • 实现dispose方法清理worker和canvas资源
  • 使用activeGifAnimations跟踪动画状态
  • 监听fabric.Image的removed事件自动停止动画
  • 限制最大帧数(100帧)防止内存溢出 通过这种架构， addAnimatedGif 实现了高效、流畅的GIF动画播放，同时避免了对主线程的阻塞，解决了传统setTimeout动画精度不足和卡顿问题。
如何渲染video的每一帧

1、创建并准备 HTMLVideoElement，然后把它作为 fabric.Image 的元素源

2、真正驱动“每帧”渲染的是一个 Worker 驱动的定时器（避免主线程 setInterval 受竞争影响）。 Worker 周期性 postMessage({ id }) 给主线程（默认 30fps），主线程根据消息触发渲染

3、Worker 与视频的绑定与渲染流程（主线程）：当 Worker 发消息时，主线程调用 renderFrame（或直接 canvas.requestRenderAll）。renderFrame 会把当前视频帧作为 fabric 元素的内容刷新：fabricImg.setElement(videoEl); fabricImg.dirty = true; canvas.requestRenderAll()。

4、额外的保底与优化手段: 保底的周期性渲染：ensureVideoRendering 会在没有 worker 驱动时以 30fps 基础频率检查并触发 canvas.requestRenderAll。 视频对象池复用（videoPool）与本地缓存（videoStorage / VideoCache）减少重复下载与 DOM 创建 。

移除/销毁时清理 worker、取消定时器、释放 blob URL

avatar
文章
阅读
粉丝