实操任务与综合面试场景
Vue与React 前端开发基础#Python全栈#第八阶段#Vue与React 前端开发基础#实操任务与综合面试场景约 1702 字 · 5 分钟阅读
追问显示点击任意追问卡片可收起 / 展开
实操：任选 Vue 或 React，将原生商品列表拆分为页面、筛选栏、商品卡片与分页组件。
追问 怎样明确 props、操作通知和状态归属？组件拆分后如何验证筛选与分页仍保持一致？
实操：实现用户编辑表单，支持加载资料、修改、取消和保存。
追问 编辑草稿与原始资料怎样分离？切换用户、接口失败和取消编辑时如何避免数据串用？
场景：Vue 页面中某个字段修改后没有更新，如何排查？
追问 怎样检查普通变量、ref 的访问、reactive 属性解构、对象替换与绑定来源，而不是直接强制刷新页面？
场景：React 点击计数按钮三次更新只增加一次，计时器又读到旧值，如何解释和修复？
追问 状态快照、更新队列与闭包分别怎样影响结果？函数式更新与 Effect 依赖分别适用于什么部分？
场景：筛选切换很快时，列表显示上一次条件的结果，如何定位？
追问 怎样记录请求条件和响应顺序，取消或忽略过期结果，并保证 loading 状态不被旧请求错误清理？
场景：重新排序后，编辑框内容出现在错误的列表项上，如何处理？
追问 怎样检查 key、组件身份和草稿状态？稳定业务 ID 与显式重置各解决什么问题？
实操：实现后台公共布局与列表、详情、编辑三个路由。
追问 怎样支持参数变化、未知路径、直接刷新和返回列表时的筛选恢复？如何验证路由与服务器行为？
实操：实现登录状态展示、受限页面访问与退出登录流程。
追问 初次加载时怎样确认身份，退出时怎样清理用户相关状态？如何展示后端拒绝请求，证明前端隐藏按钮不等于授权完成？
实操：封装分页请求逻辑或共享购物车状态，并由两个组件使用。
追问 Vue 组合式函数、Pinia、React 自定义 Hook 或 Context 如何选择？怎样说明状态究竟独立还是共享，并验证清理与更新行为？
综合实操：任选 Vue 或 React，完成一个对接 Python API 的“题库管理前端”。
追问 要求支持分类筛选、分页、题目详情、新增编辑和练习标记；如何提交组件与路由结构、接口约定、配置示例和运行说明，并演示加载、空结果、校验失败、无权限与连续操作的验收结果？
面试评分参考
每题可按 0～3 分评价：
- 0 分： 无法解释核心行为，或混用 Vue 与 React 的状态规则，导致基本功能无法完成。
- 1 分： 能说出 API 和常用写法，但状态归属、依赖、清理或边界处理不清晰。
- 2 分： 能独立实现主要功能，解释数据流与更新过程，并处理常见路由、请求和表单问题。
- 3 分： 能比较设计方案，控制副作用和异步竞争，兼顾协作、可访问性与前后端职责，并提供可靠验证步骤。
重点观察：
- 组件设计： 输入、操作通知和状态归属是否清楚，是否避免重复保存同一业务事实。
- 框架理解： 是否能结合选用框架解释更新行为，而不是只背生命周期或 Hook 名称。
- 副作用管理： 能否正确安排监听、订阅、请求与清理，处理参数变化和过期响应。
- 业务联调： 能否协调字段、分页、身份与错误约定，并覆盖完整页面状态。
- 工程交付： 项目是否易于安装运行、结构清晰、有配置说明，并能通过工具定位问题和演示验收结果。
使用建议： 按教学主线选题：通用题为 1～10、51～100；Vue 主线加选 11～30，React 主线加选 31～50。涉及另一框架的对照追问可按需调整，不以同时掌握两套生态作为入门要求。分数用于学习诊断，不直接对应薪资或录用结论。
课堂练习与组卷建议
- 基础口试： 通用组件概念 3 题、主线框架 5 题、状态与路由 3 题，要求结合短代码说明行为。
- 组件练习： 使用同一业务页面逐步完成组件拆分、表单交互与状态同步，要求画出状态归属和更新路径。
- 联调练习： 教师提供列表、详情和保存接口，同时准备空结果、字段错误、身份失效与延迟响应。
- 故障练习： 从 93～96 题选 2 题，提交最小复现、原因解释和修复后的验证记录。
- 模拟面试： 基础题 4 题、框架行为 3 题、联调与排错 3 题、综合实操 1 题；建议口试 35～45 分钟，实操 90～120 分钟。
- 验收材料： 前端代码、依赖锁文件、README、配置示例、接口约定和验收记录；固定框架及工具版本，说明启动地址和后端 API 地址。
下一阶段： HTTP、Web 与浏览器原理，系统学习请求响应、Cookie、缓存、跨域与浏览器行为，为 Python Web 框架和认证开发打基础。