React 常用 Hook 与 Vue 中对应的 API 方法对照表

React 常用 Hook 与 Vue 中对应的 API 方法对照表，包括它们的用途和使用示例。

React Hook	Vue 方法/特性	用途	示例代码（React）	示例代码（Vue）
useState	ref、reactive	声明并管理组件状态。	const [count, setCount] = useState(0);	const count = ref(0);
useEffect	watchEffect、生命周期方法	处理副作用，例如数据获取、订阅等。	useEffect(() => { fetchData(); }, [count]);	onMounted(() => fetchData());
useContext	provide、inject	组件树上下文共享数据，类似于依赖注入。	const value = useContext(MyContext);	const value = inject('myKey');
useReducer	ref 或 Vuex (全局状态管理)	用于复杂状态逻辑的更新，类似 Redux。	const [state, dispatch] = useReducer(reducer, initialState);	在 Vuex 中定义 mutations 并调用 store.commit
useCallback	computed、方法缓存	返回记忆化的回调函数，避免函数重建造成的重复渲染。	const handleClick = useCallback(() => { /*...*/ }, [dep]);	const handleClick = computed(() => { /*...*/ });
useMemo	computed	返回记忆化的值，避免不必要的重新计算。	const memoizedValue = useMemo(() => computeExpensiveValue(), [dep]);	const memoizedValue = computed(() => computeExpensiveValue());
useRef	ref	获取 DOM 元素或保存跨渲染周期的变量。	const inputRef = useRef(null);	const inputRef = ref(null);
useImperativeHandle	expose	向父组件暴露子组件的实例方法，通常结合 forwardRef 使用。	useImperativeHandle(ref, () => ({ customMethod() { ... }}));	expose({ customMethod() { ... } });
useLayoutEffect	nextTick、生命周期方法	DOM 更新后同步执行任务。	useLayoutEffect(() => { /*...*/ }, [dep]);	nextTick(() => { /*...*/ });
useDebugValue	custom inspector	自定义在 React DevTools 中的显示值。	useDebugValue(isOnline ? 'Online' : 'Offline');	- Vue Devtools 自定义属性
useTransition	Suspense、nextTick	管理并发状态，使部分更新标记为“过渡”以提升用户体验。	const [isPending, startTransition] = useTransition();	await nextTick()
useDeferredValue	watch + debounce	延迟状态更新，用于延迟计算，通常用于提升响应速度。	const deferredValue = useDeferredValue(value);	watch(value, debounce(() => {/*...*/}, 300));
useId	key 属性、Symbol	生成唯一的 ID，通常用于标识列表项等。	const id = useId();	const id = Symbol();
useSyncExternalStore	watch + 全局状态管理(Vuex等)	从外部数据源获取数据并确保更新与 UI 同步。	const state = useSyncExternalStore(subscribe, getSnapshot);	const state = store.state.data; watch(state, fn);
useInsertionEffect	nextTick、CSS-in-JS库	在渲染前插入样式，通常用于 CSS-in-JS 库优化。	useInsertionEffect(() => { /*...*/ });	nextTick(() => { /*插入样式*/ });

说明

• React 和 Vue 中有一些概念相似但实现不同，如 useEffect 和 onMounted，都可以执行副作用。
• Vue 中的 computed 和 React 的 useMemo 都可用于缓存计算值，但 Vue 的 computed 更为灵活。
• Vue 的 watch 和 React 中 useEffect 可以结合实现监听状态变化。