前端/移动开发面试题更新 2026-08-05

请比较 Vue 3 的 Composition API 与 React 的 Hooks 在设计和使用上的主要差异,至少涵盖响应式原理、执行时序、依赖追踪、以及各自的限制或注意事项。

前端/移动开发技术原理方案权衡问题排查ReactVue 3

考察说明

考察对 Vue 3 组合式 API 和 React Hooks 底层机制的理解及对比能力。

回答思路

  1. 【回答框架 1】Vue 的 Composition API 基于响应式系统,通过 Proxy 追踪依赖,数据变化自动触发视图更新,无需手动管理状态。React Hooks 基于函数组件,每次渲染都重新执行组件函数,useState 等 Hook 通过闭包保存状态,但不会自动追踪依赖。
  2. 【回答框架 2】Vue 的 setup 只在组件创建时执行一次,而 React 函数组件每次渲染都会执行,因此需要 useCallback、useMemo 等来优化性能。Vue 的 computed 和 watch 会自动追踪依赖,而 React 的 useEffect 需要手动指定依赖数组。
  3. 【回答框架 3】Vue 的响应式是自动的,修改数据即可触发更新,但需要注意响应式数据的创建时机和深层对象的处理。React 的状态更新是显式的,通过 setState 触发,但状态更新可能是异步的,且函数组件的每次渲染都是独立的闭包,需要注意闭包陷阱。
  4. 【回答框架 4】Composition API 可以在 setup 中按逻辑组织代码,复用逻辑通过自定义组合函数,而 React Hooks 也提供类似能力,但需要遵循 Hooks 的规则,如不在循环、条件或嵌套函数中调用 Hooks。
  5. 【关键点 1】Vue 自动追踪依赖,React 手动指定依赖数组。
  6. 【关键点 2】Vue 的 setup 只执行一次,React 函数组件每次渲染都执行。
  7. 【关键点 3】Vue 基于 Proxy 的响应式系统,React 基于不可变状态和显式更新。
  8. 【易错点 1】混淆 Vue 的自动追踪与 React 的依赖数组,导致对更新机制的错误理解。
  9. 【易错点 2】认为 React Hooks 的闭包陷阱在 Vue 中不存在,实际上 Vue 也需要注意闭包导致的旧值问题。
  10. 【易错点 3】忽略 Vue 3 中 ref 和 reactive 的区别,以及响应式丢失的场景。