← 返回目录

第 9 卷

第 9 / 12 卷日期：2025-12-31

15const { name, age } = state.user

16	console.log(`当前用户：${name}，年龄：${age}`)
17	//清理副作用
18	onInvalidate(() => { /清理逻辑/ })
19	})

23. Vue3中reactive、ref的区别及使用场景

一、核心区别

对比维度	reactive	ref
适用数据类型	仅支持对象/数组类型（引用	主要支持原始类型，也可支持
	类型），不支持原始类型	对象/数组（内部会自动转为
	（string、number、	reactive代理）

boolean等）

访问方式	直接访问属性（如	需通过.value属性访问和
	state.name），无需额外	修改（如nameRef.value
	包装	= '新值'）；模板中使用时

自动解包，无需 .value

响应式实现原理直接通过Proxy代理目标对封装为包含 value 属性的对象，拦截对象的属性操作象，对 value 属性使用

Proxy实现响应式（原始类型）或转为reactive（引用类

型）

解构赋值影响	直接解构会丢失响应式（如	解构后仍保持响应式（如
	const { name } =	const { value: name }
	state，name不再是响应	= nameRef，name需通
	式），需使用toRefs辅助	过.value访问，仍为响应
	函数	式）
类型推导（TS）	对对象类型的推导更自然，可	原始类型的推导更精准，引用
	直接推导属性类型	类型需通过Ref<T>显式声

明类型

二、使用场景

项）；

不需要解构赋值，直接通过对象属性访问状态的场景，避免使用 toRefs 的额外开销。
ref适用场景：
存储单个原始类型状态（如单个字符串、数字、布尔值，如 const count = ref(0)、

const isShow = ref(false)）；

需要将响应式状态传递给函数，且希望保持响应式的场景（ref通过 .value 传递，不会丢失响应

式；reactive直接传递对象属性会丢失响应式）；

模板中使用的单个响应式状态（自动解包 .value，使用更简洁）；
需要解构赋值且保持响应式的场景（无需使用 toRefs，直接解构 .value 即可）。

三、最佳实践

复杂对象/数组状态用 reactive，单个原始类型状态用 ref；
若需要解构 reactive 对象的属性并保持响应式，使用 toRefs（如 const { name, age

} = toRefs(state)）；

ref存储引用类型时（如 const userRef = ref({ name: '张三' })），修改深层属性仍

需通过 .value（如 userRef.value.name = '李四'），内部会自动转为reactive代理；

TypeScript环境下，ref的原始类型可自动推导（如 const count = ref(0) 推导为

Ref<number>），引用类型建议显式声明（如 const userRef = ref<User>({ name:

'张三' })）。

24. Vue3的Composition API与React的Hooks在设计和用法上的主要不

同

一、设计理念差异

核心定位：
Vue3 Composition API：作为选项式API的补充和增强，核心目标是解决大型组件的“逻辑碎片

化”问题，通过函数组合的方式组织逻辑，保持与Vue原生响应式系统的深度融合；

React Hooks：是React函数组件的核心特性，彻底替代类组件，通过 Hooks 实现状态管理、生命

周期等功能，核心目标是让函数组件具备类组件的能力，同时简化逻辑复用。

与响应式系统的关系：

二、用法核心差异

对比维度	Vue3 Composition API	React Hooks
状态定义与访问	通过reactive（对象/数	通过useState（单个状
	组）或ref（原始类型）定	态）或useReducer（复杂
	义响应式状态，直接访问属性	状态）定义状态，通过数组解
	（reactive）或通过.value	构获取状态和更新函数（如
	访问（ref），状态变化自动	const [count,
	响应；	setCount] =

useState(0)），需调用更新函数触发重渲染；

逻辑复用方式	通过“组合函数”复用逻辑	通过“自定义Hooks”复用逻
	（如function	辑（如function
	useUser() { const	useUser() { const
	state = reactive({});	[user, setUser] =
	... return state;	useState({}); ...
	}），组件内直接调用函数获	return [user,
	取复用的状态和逻辑，无额外	setUser]; }），自定义
	约束；	Hooks必须以“use”开头，

且只能在函数组件或其他 Hooks顶层调用；

生命周期模拟	通过onMounted、	通过useEffect模拟所有生
	onUpdated、	命周期（如挂载、更新、卸
	onUnmounted等函数模拟	载），需通过依赖数组控制执
	生命周期，可在setup函数	行时机（空数组：挂载时执行
	内任意位置调用，支持多个相	一次；无数组：每次渲染执
	同生命周期钩子（按顺序执	行；指定依赖：依赖变化执
	行）；	行）；
依赖收集	自动收集依赖，	需手动指定依赖数组（如
	computed、watch、	useEffect(() => {},
	watchEffect等API会自动	[count])），若依赖遗漏会
	监听使用的响应式状态，无需	导致逻辑错误，React 18+支
	手动指定依赖；	持自动依赖收集（但仍建议显

式指定）；

全站分卷索引 · 12 卷