组件化与前端应用基础
Vue与React 前端开发基础#Python全栈#第八阶段#Vue与React 前端开发基础#组件化与前端应用基础约 1046 字 · 3 分钟阅读
追问显示点击任意追问卡片可收起 / 展开
本阶段学习说明
整体培养方向： Python 全栈开发就业，按北京 10～20k 岗位所需能力逐步推进。
本阶段定位： 承接原生 HTML、CSS 与 JavaScript，学习组件化页面、状态管理、前端路由和 Python 后端接口联调，形成独立完成常见业务前端的能力。
适用环境： Vue 3 单文件组件与 Composition API；React 函数组件与 Hooks。路由、状态和构建工具按项目锁定版本使用，答题时说明采用的框架及版本。
考查目标： 能拆分组件、解释数据流、处理状态更新与副作用，并完成有加载、错误和权限反馈的业务页面。
题库结构： 100 道题，每题包含追问；兼顾通用能力、Vue、React、项目设计与排错。本阶段提供题目，不包含参考答案。教学可选 Vue 或 React 为主线，另一框架用于对照学习；不要求初学者同时精通两套生态。
答题约定： 先说明状态由谁拥有、如何变化和如何传递，再解释页面更新；区分 Vue 的响应式追踪与 React 的渲染、状态快照，不直接套用另一框架的行为。请求与订阅应交代触发条件、清理方式和失败处理；前端路由限制与按钮隐藏不能代替服务端授权。
相比直接操作 DOM，组件化开发改变了什么？
追问 如何用“状态决定界面”描述一个可筛选列表，而不是逐个修改元素内容？
怎样判断一个页面区域是否应该拆成组件？
追问 复用、职责、状态与复杂度如何帮助决策？为什么不是组件越小越好？
页面组件、业务组件与通用组件有什么区别？
追问 用户列表页面、用户卡片与通用按钮各应承担哪些职责？
Props、内部状态与派生数据分别是什么？
追问 商品价格、购买数量与总价分别适合放在哪里？为什么总价通常不应再保存成独立状态？
单向数据流怎样帮助团队理解组件关系？
追问 子组件需要修改父组件数据时，应如何表达操作意图而不是直接改写输入？
列表中的 key 解决什么问题？
追问 插入、删除和重新排序时，索引作为 key 可能怎样影响带输入框的列表项？
组件实例、渲染结果与真实 DOM 有什么区别？
追问 组件重新渲染是否意味着所有 DOM 都被删除重建？为什么不能断言虚拟 DOM 总比手写 DOM 更快？
组件中的事件处理与渲染逻辑应怎样分工？
追问 用户点击提交与界面描述分别应该在哪里处理？为什么不应在渲染过程中随意发请求？
单页应用的前端路由与普通页面跳转有什么区别？
追问 地址变化、页面刷新和组件切换分别由谁处理？首次打开应用仍需要哪些服务端资源？
如何设计组件的输入、输出与状态接口？
追问 以分页组件为例，页码、总条数、每页大小和切页事件应怎样约定，避免隐式依赖？