1.3 FastAPI → Django → Vue → React 面试题

下面按 FastAPI → Django → Vue → React 四个模块梳理高频面试题，附代码案例。

一、FastAPI 篇

Q1：FastAPI 的核心特点和优势是什么？为什么被称为"高性能"？

核心答题框架：

FastAPI 是一个现代、快速（高性能）的 Web 框架，其核心优势：

极致性能 ：底层基于 Starlette（ASGI 框架），原生支持 async/await，在处理 I/O 密集型任务时高效利用单线程处理成千上万并发连接，性能可与 Node.js 和 Go 媲美
类型安全与自动校验：深度集成 Pydantic，利用 Python 类型提示自动完成请求数据的解析、验证和序列化
自动生成 API 文档 ：开箱即用提供 Swagger UI (/docs) 和 ReDoc (/redoc)
依赖注入系统：强大且灵活

加分回答：> "FastAPI 的'高性能'指处理高并发 I/O 的能力；'快'不仅指性能，也指开发速度------通过类型安全和自动文档，显著提升开发效率。"

代码案例：基础 FastAPI 应用

python 复制代码

from fastapi import FastAPI
from pydantic import BaseModel
import uvicorn

app = FastAPI()

# 定义 Pydantic 模型（自动校验）
class Item(BaseModel):
    name: str
    price: float
    is_offer: bool = False

# 路径操作装饰器 + 类型提示
@app.get("/")
async def root():
    return {"message": "Hello World"}

@app.post("/items/")
async def create_item(item: Item):
    # FastAPI 自动校验请求体是否符合 Item 模型
    return {"item_name": item.name, "price": item.price}

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000)

Q2：FastAPI 的依赖注入（Dependency Injection）是如何实现的？

核心答题框架：

依赖注入是一种解耦组件之间依赖关系的设计模式。FastAPI 中通过 Depends 实现：

定义依赖项（普通函数或类）
使用 Depends 标记参数
请求到达时，FastAPI 自动调用依赖函数并递归解析所有子依赖
最终将返回值注入路径操作函数

代码案例：数据库会话依赖注入

python 复制代码

from fastapi import FastAPI, Depends, HTTPException
from sqlalchemy.orm import Session

app = FastAPI()

# 定义依赖项：获取数据库会话
def get_db():
    try:
        db = SessionLocal()
        yield db
    finally:
        db.close()

# 定义依赖项：根据 ID 获取商品
def get_item(item_id: int, db: Session = Depends(get_db)):
    item = db.query(Item).filter(Item.id == item_id).first()
    if not item:
        raise HTTPException(status_code=404, detail="Item not found")
    return item

# 路径操作函数中注入依赖
@app.get("/items/{item_id}")
async def read_item(item: Item = Depends(get_item)):
    return item

加分回答 ：> "依赖注入让代码更可测、更解耦。常见误区是在视图函数内硬编码依赖，正确做法是统一用 Depends 声明，让框架负责组装。"

Q3：FastAPI 中同步函数和异步函数如何选择？

核心答题框架：

场景	推荐	原因
I/O 密集型（数据库查询、HTTP 请求、文件读写）	`async def`	非阻塞，提高并发
CPU 密集型（复杂计算、加密）	`def`（同步）	异步对 CPU 任务无帮助，反而增加开销
混合场景	`async def` + `run_in_executor`	将 CPU 任务放到线程池执行

二、Django 篇

Q4：Django 的核心思想是什么？

核心答题框架：

Django 的核心思想是 "电池已内置"（Batteries Included） ------框架自带常用功能（ORM、认证、表单、模板、Admin 后台等），无需额外找第三方库。同时 Django 遵循 MTV（Model-Template-View） 架构模式：

组件	职责
Model	定义数据模型，操作数据库（ORM）
Template	负责页面展示（HTML）
View	处理业务逻辑，连接 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 返回客户端

代码案例：自定义中间件

python 复制代码

# middleware.py
from django.utils.deprecation import MiddlewareMixin

class RequestLogMiddleware(MiddlewareMixin):
    def process_request(self, request):
        # 请求进入时记录日志
        print(f"Request: {request.method} {request.path}")
        return None  # 继续处理

    def process_response(self, request, response):
        # 响应返回时记录
        print(f"Response status: {response.status_code}")
        return response

# settings.py 中注册
MIDDLEWARE = [
    # ...
    'myapp.middleware.RequestLogMiddleware',
]

Q6：Django ORM 的 N+1 查询问题是什么？如何解决？

核心答题框架：

N+1 查询指：查询主表 N 条记录后，每条记录又额外查询一次关联表，导致总共 N+1 次 SQL。

代码案例：

python 复制代码

# ❌ 产生 N+1 查询
books = Book.objects.all()  # 1 次查询
for book in books:
    print(book.author.name)  # 每本书额外 1 次查询，共 N+1 次

# ✅ 使用 select_related（外键、一对一）
books = Book.objects.select_related('author').all()  # 1 次 JOIN 查询

# ✅ 使用 prefetch_related（多对多、反向外键）
books = Book.objects.prefetch_related('tags').all()  # 2 次查询

加分回答 ：> "select_related 生成 JOIN 查询（适合外键），prefetch_related 分别查询后在 Python 层面关联（适合多对多）。选错反而会拖慢性能。"

三、Vue 篇

Q7：Vue3 相比 Vue2 有哪些主要改进？

核心答题框架：

改进点	说明
响应式系统	使用 `Proxy` 替代 `Object.defineProperty`，能监听对象属性的添加/删除及数组索引变化
性能提升	重构虚拟 DOM（PatchFlag、静态提升）、事件缓存
Tree-shaking	模块化架构，未使用代码不会被打包
Composition API	更灵活的逻辑组织和复用方式
TypeScript 支持	源码用 TS 重写，类型推断更好
新组件	Teleport、Suspense、Fragment

Q8：Composition API 和 Options API 的区别？

核心答题框架：

Options API （Vue2 方式）：按选项（data、methods、computed）组织代码
Composition API （Vue3 方式）：按逻辑功能 组织代码，在 setup() 中组合

代码案例：自定义组合式函数（逻辑复用）

javascript 复制代码

// useCounter.js - 组合式函数
import { ref } from 'vue';

export function useCounter(initialValue = 0) {
    const count = ref(initialValue);
    const increment = () => { count.value++; };
    const decrement = () => { count.value--; };
    return { count, increment, decrement };
}

// MyComponent.vue - 在组件中使用
import { useCounter } from './useCounter';

export default {
    setup() {
        const { count, increment, decrement } = useCounter(10);
        return { count, increment, decrement };
    }
};

加分回答：> "Composition API 解决了 Vue2 Mixins 的命名冲突和来源不清晰问题。同时更好的 TypeScript 支持让大型项目更可控。"

Q9：Vue3 的生命周期钩子有哪些变化？

核心变化：

Vue2	Vue3 组合式 API	说明
`beforeCreate`	被 `setup()` 替代	直接在 setup 中写
`created`	被 `setup()` 替代	直接在 setup 中写
`beforeMount`	`onBeforeMount`	挂载前
`mounted`	`onMounted`	挂载后
`beforeUpdate`	`onBeforeUpdate`	更新前
`updated`	`onUpdated`	更新后
`beforeDestroy`	`onBeforeUnmount`	名称变更
`destroyed`	`onUnmounted`	名称变更

四、React 篇

Q10：React 18 有哪些核心新特性？

核心答题框架：

Concurrent Rendering（并发渲染） ：渲染可中断
Automatic Batching（自动批处理） ：多次 setState 自动合并
Transitions（startTransition） ：标记非紧急更新
Suspense 增强
新的 Hydration API

加分回答 ：> "React 18 的核心不是新功能，而是调度能力的升级，让 UI 更'可中断'。"

Q11：useState 和 useReducer 的区别？

核心答题框架：

场景	推荐
单一独立状态	`useState`
复杂状态逻辑（多个子值联动）	`useReducer`

代码案例：

javascript 复制代码

// useState - 简单状态
const [count, setCount] = useState(0);

// useReducer - 复杂状态
const initialState = { count: 0 };

function reducer(state, action) {
    switch (action.type) {
        case 'increment': return { count: state.count + 1 };
        case 'decrement': return { count: state.count - 1 };
        default: return state;
    }
}

const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'increment' });

加分回答 ：> "useReducer 更接近 Redux 思想，适合复杂状态流转。组件内状态管理用 useReducer 就够了，不一定非要上 Redux。"

Q12：useEffect 的清理函数什么时候执行？

核心答题框架：

组件卸载时
依赖项变化，下一次 Effect 执行之前

代码案例：

javascript 复制代码

useEffect(() => {
    const timer = setInterval(() => {
        console.log('tick');
    }, 1000);

    // 清理函数：防止内存泄漏 + 重复订阅
    return () => {
        clearInterval(timer);
    };
}, []);  // 空依赖 → 只在挂载和卸载时执行

加分回答 ：> "清理函数防止内存泄漏 和重复订阅。如果不清理定时器、事件监听或 WebSocket，组件卸载后它们依然存活，造成严重的内存泄漏。"

Q13：React 和 Vue 的核心区别？

核心答题框架：

维度	React	Vue
思想	`UI = f(state)`	MVVM 响应式
数据更新	手动 `setState`	自动依赖追踪
模板	JSX	Template
灵活性	极高	适中

加分回答 ：> "React 是 UI 库 ，Vue 是框架。React 更偏'自由'，Vue 更偏'约束'------这决定了选型时要看团队偏好和项目复杂度。"

五、框架对比总结（面试加分）

维度	FastAPI	Django	Vue	React
定位	高性能 API 框架	全栈 Web 框架	前端框架	前端 UI 库
核心哲学	类型安全 + 异步	电池已内置	渐进式	组合式
适用场景	微服务、API 服务	复杂 Web 应用、CMS	中后台、渐进增强	大型 SPA、跨平台
性能特点	极高（ASGI + async）	中等（WSGI，支持异步）	虚拟 DOM + 响应式	虚拟 DOM + Fiber

选型决策框架：

"FastAPI for APIs，Django for full-stack，Flask for everything else ------然后只在 benchmark 证明你需要时才做优化。"