1.3 FastAPI → Django → Vue → React 面试题

下面按FastAPI → Django → Vue → React四个模块梳理高频面试题附代码案例。一、FastAPI 篇Q1FastAPI 的核心特点和优势是什么为什么被称为“高性能”核心答题框架FastAPI 是一个现代、快速高性能的 Web 框架其核心优势极致性能底层基于 StarletteASGI 框架原生支持async/await在处理 I/O 密集型任务时高效利用单线程处理成千上万并发连接性能可与 Node.js 和 Go 媲美类型安全与自动校验深度集成 Pydantic利用 Python 类型提示自动完成请求数据的解析、验证和序列化自动生成 API 文档开箱即用提供 Swagger UI (/docs) 和 ReDoc (/redoc)依赖注入系统强大且灵活加分回答 “FastAPI 的‘高性能’指处理高并发 I/O 的能力‘快’不仅指性能也指开发速度——通过类型安全和自动文档显著提升开发效率。”代码案例基础 FastAPI 应用fromfastapiimportFastAPIfrompydanticimportBaseModelimportuvicorn appFastAPI()# 定义 Pydantic 模型自动校验classItem(BaseModel):name:strprice:floatis_offer:boolFalse# 路径操作装饰器 类型提示app.get(/)asyncdefroot():return{message:Hello World}app.post(/items/)asyncdefcreate_item(item:Item):# FastAPI 自动校验请求体是否符合 Item 模型return{item_name:item.name,price:item.price}if__name____main__:uvicorn.run(app,host0.0.0.0,port8000)Q2FastAPI 的依赖注入Dependency Injection是如何实现的核心答题框架依赖注入是一种解耦组件之间依赖关系的设计模式。FastAPI 中通过Depends实现定义依赖项普通函数或类使用Depends标记参数请求到达时FastAPI 自动调用依赖函数并递归解析所有子依赖最终将返回值注入路径操作函数代码案例数据库会话依赖注入fromfastapiimportFastAPI,Depends,HTTPExceptionfromsqlalchemy.ormimportSession appFastAPI()# 定义依赖项获取数据库会话defget_db():try:dbSessionLocal()yielddbfinally:db.close()# 定义依赖项根据 ID 获取商品defget_item(item_id:int,db:SessionDepends(get_db)):itemdb.query(Item).filter(Item.iditem_id).first()ifnotitem:raiseHTTPException(status_code404,detailItem not found)returnitem# 路径操作函数中注入依赖app.get(/items/{item_id})asyncdefread_item(item:ItemDepends(get_item)):returnitem加分回答 “依赖注入让代码更可测、更解耦。常见误区是在视图函数内硬编码依赖正确做法是统一用Depends声明让框架负责组装。”Q3FastAPI 中同步函数和异步函数如何选择核心答题框架场景推荐原因I/O 密集型数据库查询、HTTP 请求、文件读写async def非阻塞提高并发CPU 密集型复杂计算、加密def同步异步对 CPU 任务无帮助反而增加开销混合场景async defrun_in_executor将 CPU 任务放到线程池执行二、Django 篇Q4Django 的核心思想是什么核心答题框架Django 的核心思想是“电池已内置”Batteries Included——框架自带常用功能ORM、认证、表单、模板、Admin 后台等无需额外找第三方库。同时 Django 遵循MTVModel-Template-View架构模式组件职责Model定义数据模型操作数据库ORMTemplate负责页面展示HTMLView处理业务逻辑连接 Model 和 Template加分回答 “Django 的 MTV 和传统 MVC 本质类似只是把 Controller 的职责放到了 View 里而 Template 替代了 View 的展示层。”Q5描述 Django 请求的完整生命周期。核心答题框架用户请求 → WSGI 服务器 → 中间件(process_request) → URL 路由匹配 → 中间件(process_view) → 视图处理 → 模板渲染 → 中间件(process_response) → 响应返回请求发起浏览器生成 HTTP 请求发送给服务器WSGI 接收WSGI 服务器将 HTTP 请求转换为 Python 可理解格式中间件处理请求依次经过所有中间件的process_request方法认证、日志、权限等URL 路由匹配URL 调度器根据urls.py找到对应视图视图处理视图执行业务逻辑数据库查询等模板渲染视图将数据传递给模板生成 HTML响应返回视图返回响应对象经过中间件process_response返回客户端代码案例自定义中间件# middleware.pyfromdjango.utils.deprecationimportMiddlewareMixinclassRequestLogMiddleware(MiddlewareMixin):defprocess_request(self,request):# 请求进入时记录日志print(fRequest:{request.method}{request.path})returnNone# 继续处理defprocess_response(self,request,response):# 响应返回时记录print(fResponse status:{response.status_code})returnresponse# settings.py 中注册MIDDLEWARE[# ...myapp.middleware.RequestLogMiddleware,]Q6Django ORM 的 N1 查询问题是什么如何解决核心答题框架N1 查询指查询主表 N 条记录后每条记录又额外查询一次关联表导致总共 N1 次 SQL。代码案例# ❌ 产生 N1 查询booksBook.objects.all()# 1 次查询forbookinbooks:print(book.author.name)# 每本书额外 1 次查询共 N1 次# ✅ 使用 select_related外键、一对一booksBook.objects.select_related(author).all()# 1 次 JOIN 查询# ✅ 使用 prefetch_related多对多、反向外键booksBook.objects.prefetch_related(tags).all()# 2 次查询加分回答 “select_related生成 JOIN 查询适合外键prefetch_related分别查询后在 Python 层面关联适合多对多。选错反而会拖慢性能。”三、Vue 篇Q7Vue3 相比 Vue2 有哪些主要改进核心答题框架改进点说明响应式系统使用Proxy替代Object.defineProperty能监听对象属性的添加/删除及数组索引变化性能提升重构虚拟 DOMPatchFlag、静态提升、事件缓存Tree-shaking模块化架构未使用代码不会被打包Composition API更灵活的逻辑组织和复用方式TypeScript 支持源码用 TS 重写类型推断更好新组件Teleport、Suspense、FragmentQ8Composition API 和 Options API 的区别核心答题框架Options APIVue2 方式按选项data、methods、computed组织代码Composition APIVue3 方式按逻辑功能组织代码在setup()中组合代码案例自定义组合式函数逻辑复用// useCounter.js - 组合式函数import{ref}fromvue;exportfunctionuseCounter(initialValue0){constcountref(initialValue);constincrement(){count.value;};constdecrement(){count.value--;};return{count,increment,decrement};}// MyComponent.vue - 在组件中使用import{useCounter}from./useCounter;exportdefault{setup(){const{count,increment,decrement}useCounter(10);return{count,increment,decrement};}};加分回答 “Composition API 解决了 Vue2 Mixins 的命名冲突和来源不清晰问题。同时更好的 TypeScript 支持让大型项目更可控。”Q9Vue3 的生命周期钩子有哪些变化核心变化Vue2Vue3 组合式 API说明beforeCreate被setup()替代直接在 setup 中写created被setup()替代直接在 setup 中写beforeMountonBeforeMount挂载前mountedonMounted挂载后beforeUpdateonBeforeUpdate更新前updatedonUpdated更新后beforeDestroyonBeforeUnmount名称变更destroyedonUnmounted名称变更四、React 篇Q10React 18 有哪些核心新特性核心答题框架Concurrent Rendering并发渲染渲染可中断Automatic Batching自动批处理多次 setState 自动合并TransitionsstartTransition标记非紧急更新Suspense 增强新的 Hydration API加分回答 “React 18 的核心不是新功能而是调度能力的升级让 UI 更‘可中断’。”Q11useState 和 useReducer 的区别核心答题框架场景推荐单一独立状态useState复杂状态逻辑多个子值联动useReducer代码案例// useState - 简单状态const[count,setCount]useState(0);// useReducer - 复杂状态constinitialState{count:0};functionreducer(state,action){switch(action.type){caseincrement:return{count:state.count1};casedecrement:return{count:state.count-1};default:returnstate;}}const[state,dispatch]useReducer(reducer,initialState);dispatch({type:increment});加分回答 “useReducer更接近 Redux 思想适合复杂状态流转。组件内状态管理用useReducer就够了不一定非要上 Redux。”Q12useEffect 的清理函数什么时候执行核心答题框架组件卸载时依赖项变化下一次 Effect 执行之前代码案例useEffect((){consttimersetInterval((){console.log(tick);},1000);// 清理函数防止内存泄漏 重复订阅return(){clearInterval(timer);};},[]);// 空依赖 → 只在挂载和卸载时执行加分回答 “清理函数防止内存泄漏和重复订阅。如果不清理定时器、事件监听或 WebSocket组件卸载后它们依然存活造成严重的内存泄漏。”Q13React 和 Vue 的核心区别核心答题框架维度ReactVue思想UI f(state)MVVM 响应式数据更新手动setState自动依赖追踪模板JSXTemplate灵活性极高适中加分回答 “React 是UI 库Vue 是框架。React 更偏‘自由’Vue 更偏‘约束’——这决定了选型时要看团队偏好和项目复杂度。”五、框架对比总结面试加分维度FastAPIDjangoVueReact定位高性能 API 框架全栈 Web 框架前端框架前端 UI 库核心哲学类型安全 异步电池已内置渐进式组合式适用场景微服务、API 服务复杂 Web 应用、CMS中后台、渐进增强大型 SPA、跨平台性能特点极高ASGI async中等WSGI支持异步虚拟 DOM 响应式虚拟 DOM Fiber选型决策框架“FastAPI for APIsDjango for full-stackFlask for everything else——然后只在 benchmark 证明你需要时才做优化。”