📚前端面试题速记
Q11
★ ★ ★ ★ ★

Vue 3 的响应式系统和 React Hooks 相比有何优势？

⚡ 速记答案（30 秒）

细粒度追踪：属性级依赖，通常不需要 useMemo/useCallback。深度响应式天然支持。逻辑组织按"功能"而非生命周期。

📖 详细讲解

标准面试回答（推荐记住）

Vue 3 的响应式是细粒度追踪，变化直接定位到具体属性，不需要像 React 那样手动使用 useMemo、useCallback 优化。对象和数组天然深度响应式。Composition API 按功能组织代码，而不是像 React Hooks 那样受到调用顺序和规则限制。

核心设计理念差异

Vue 3 Composition API:

  • 基于 Proxy 的可变数据 (Mutable)：修改数据自动触发更新。
  • 细粒度依赖收集：只在这个属性真正被用于 render/effect 时才收集依赖，更新时只更新对应的副作用。
  • setup 执行一次：Hooks (Composables) 闭包内也是执行一次，不存在"每次 render 重复创建函数"的问题，因此不需要 useCallback/useRef 来保持引用。

React Hooks:

  • 不可变数据 (Immutable)：setState(newData) 触发整个子树重绘 (除非 memo)。
  • 每次 Render 执行函数：Function Component 每次更新都会重新运行，导致内部函数重新创建，需要依赖数组 (deps array) 手动管理副作用执行时机。
  • 心智负担：需要熟练使用 useMemo、useCallback 应对性能优化，遵循 Hook 规则 (不能在条件语句中调用)。

优势总结

  1. 性能：默认高性能，减少手动优化。
  2. 心智负担：符合 JS 直觉（修改值 -> 界面变），没有闭包陷阱。
  3. 更灵活：不受调用顺序限制。

✅ 面试要点

  • •理解细粒度追踪的优势
  • •对比两种范式的心智负担
  • •知道各自的适用场景

💻 代码示例

Vue vs React 对比
// Vue 3 - 自动细粒度追踪
const state = reactive({
  count: 0,
  items: []
})

const double = computed(() => state.count * 2)
// 只有 count 变化时才重新计算

// React - 需要手动优化
const [count, setCount] = useState(0)
const [items, setItems] = useState([])

// 需要手动指定依赖
const double = useMemo(() => count * 2, [count])

// 需要 useCallback 防止重渲染
const handleClick = useCallback(() => {
  setCount(c => c + 1)
}, [])