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