1. 从“响应式”说起为什么我们需要 ref 和 reactive如果你刚开始接触 Vue 3 的 Composition API面对ref()和reactive()这两个核心 API心里大概率会冒出一个问号它们看起来都能创建响应式数据为什么要有两个直接用reactive包住所有对象不就好了吗这个问题我刚开始也纠结了很久直到在实际项目中踩了几个不大不小的坑才真正理解了它们的设计哲学和适用边界。今天我们就抛开官方文档那些略显抽象的定义从一个一线开发者的视角把ref和reactive掰开揉碎了讲清楚。简单来说ref和reactive都是 Vue 3 响应式系统的基石但它们服务的场景和心智模型有本质区别。你可以把ref想象成一个“盒子”它专门用来封装一个独立的、基础类型的值如字符串、数字、布尔值让你能通过.value属性去“打开盒子”访问和修改它。而reactive更像一个“魔法口袋”你扔进去一个普通的 JavaScript 对象它会把这个对象连同其内部所有嵌套属性都变成响应式的你可以直接像操作普通对象一样操作它无需额外的.value。这个区别听起来简单但背后涉及到类型推断、代码组织、与第三方库集成、以及在特定场景如模板引用、组合函数下的表现差异。理解不透彻就容易写出看似能跑但隐患重重的代码比如在组合函数里错误地返回了reactive对象的一部分导致响应性丢失或者在不该用.value的地方疯狂点.value。接下来我们就从原理、用法、场景到避坑指南一步步深入。2. 核心原理拆解响应式系统的两种“包装”策略要理解区别必须先明白 Vue 3 响应式系统的底层是如何工作的。Vue 3 抛弃了 Vue 2 基于Object.defineProperty的响应式实现转而采用了 ES6 的Proxy。Proxy可以拦截对象的基本操作如读取get、设置set、删除deleteProperty等。reactive()函数正是基于Proxy实现的。2.1 reactive()基于 Proxy 的深度代理当你调用const obj reactive({ count: 0, nested: { a: 1 } })时Vue 内部会为这个普通对象创建一个Proxy代理。这个代理是“深度”的意味着它不仅会监听obj.count的修改也会递归地将obj.nested这个子对象也变成响应式的。当你访问obj.count时Proxy的get拦截器会追踪这个依赖如果是在effect或computed等上下文中当你修改obj.count 1时set拦截器会触发相应的更新。关键特性直接访问你直接操作obj.count无需.value。深度响应嵌套对象自动成为响应式。对象限定它只接受对象Object, Array, Map, Set等作为参数。如果你传一个字符串或数字进去Vue 会在开发环境下警告你。2.2 ref()一个通用的“响应式引用”容器ref()的设计目标更通用它要能容纳任何类型的值包括基础类型string, number, boolean, null, undefined和对象引用。由于Proxy无法直接代理基础类型它们不是对象Vue 采用了一种“装箱”策略。当你调用const num ref(0)时Vue 实际上创建了一个具有value属性的响应式对象类似于{ value: 0 }。然后Vue 对这个.value属性进行了响应式处理。如果传入的是对象如ref({ count: 0 })那么ref内部会调用reactive()方法来处理这个对象最终的效果是num.value成为了一个响应式对象。关键特性.value 访问你必须通过.value来读写内部值。类型通用可以包装任何值。模板自动解包在模板中直接使用{{ num }}Vue 会自动帮你解开.value无需在模板里写.value。但在script setup的 JS/TS 逻辑部分必须显式使用.value。引用稳定ref创建的响应式引用本身是稳定的即使内部.value被完全替换如num.value ‘newValue’这个ref变量指向的仍然是同一个容器对象。2.3 响应性丢失的经典陷阱这里衍生出一个非常重要的概念响应式连接Reactive Connection。reactive()返回的是一个代理对象这个代理对象和原始对象是“不同”的。响应性附着在这个代理对象上。const raw { foo: 1 }; const reactiveObj reactive(raw); // 以下操作会导致响应性丢失 let broken reactiveObj.foo; // 将基础值赋值给变量失去连接 let { foo } reactiveObj; // 解构赋值失去连接 const passSomewhere reactiveObj.foo; // 传递给函数失去连接 // 正确的做法始终保持对响应式对象“本身”或“其属性如果是对象”的引用 const fooRef toRef(reactiveObj, ‘foo’); // 使用 toRef 创建引用 const { foo } toRefs(reactiveObj); // 使用 toRefs 解构而ref通过.value这个统一的接口强制你始终通过这个容器去访问值在很大程度上避免了无意中“丢失引用”的问题。当然如果你把ref.value一个对象解构了同样会丢失响应性。3. 实战场景下的选择指南何时用 ref何时用 reactive理论讲完了我们落到实际编码中。我总结了一个简单的决策流但这并非铁律团队规范和个人偏好也很重要。3.1 优先使用 ref() 的场景定义基础类型的响应式数据这是ref的天然主场。const loading ref(false); const username ref(‘’); const count ref(0);定义可能需要被重新赋值的响应式数据ref的.value可以被整个替换。const userInfo ref({ name: ‘Alice’, age: 30 }); // 未来某个时刻完全替换数据 const fetchUser async () { userInfo.value await api.fetchUser(); // 整个替换响应性保持 };如果用reactive做同样的事你需要一个个属性去赋值或者使用Object.assign(reactiveObj, newData)但后者在某些极端情况下可能不如ref的整个替换直观。在组合函数Composables中返回数据这是一个最佳实践。组合函数返回ref可以让使用者明确知道这是一个响应式引用需要通过.value访问在JS中语义更清晰。同时它避免了使用reactive返回时可能发生的解构响应性丢失问题。// useMouse.js - 好的做法 export function useMouse() { const x ref(0); const y ref(0); // ... 逻辑 return { x, y }; // 使用者解构后依然是 ref } // 使用 const { x, y } useMouse(); // x 和 y 仍然是 ref watch(x, (newX) { console.log(newX); }); // 正常工作模板引用Template Refs这是ref的特殊用法用于引用 DOM 元素或子组件实例。template input ref“inputRef” / /template script setup import { ref, onMounted } from ‘vue’; const inputRef ref(null); onMounted(() { inputRef.value?.focus(); // 通过 .value 访问 DOM 元素 }); /script3.2 优先使用 reactive() 的场景定义逻辑紧密关联的对象状态组当一组状态天然属于同一个对象并且你很少会需要整体替换这个对象时reactive用起来更自然。const formState reactive({ username: ‘’, password: ‘’, rememberMe: false, }); // 在模板中直接使用 formState.username在逻辑中直接修改 formState.password相比用多个ref然后组合reactive保持了数据结构的完整性在传递给需要对象参数的函数或库时也更方便。与第三方非响应式库集成有些库例如某些图表库、地图 SDK需要你传入一个配置对象并且后续会修改这个对象的属性。如果你希望这些修改是响应式的可以用reactive包装配置对象后传入。import * as echarts from ‘echarts’; const chartOption reactive({ title: { text: ‘销量图表’ }, xAxis: { data: [] }, series: [{ data: [] }], }); const chartInstance echarts.init(chartDom); chartInstance.setOption(chartOption); // 传入 reactive 对象 // 后续更新数据视图会自动响应 fetchData().then(data { chartOption.xAxis.data data.categories; chartOption.series[0].data data.values; // 由于 chartOption 是响应式的这里可能需要配合 chartInstance.setOption 的特定调用 // 但响应式数据能帮你管理状态变化。 });注意这要求该第三方库是直接修改你传入的对象属性而不是内部创建副本。对于ref你需要传xxx.value可能会让库的调用方感到困惑。3.3 一个常见的混合模式与工具函数在实际项目中你很少会只使用其中一种。更常见的模式是混合使用并借助 Vue 提供的工具函数来桥接它们。toRef和toRefs这是连接reactive世界和ref世界的桥梁。toRef(reactiveObj, ‘key’)基于reactive对象的一个属性创建一个与之保持响应式连接的ref。即使原属性不存在创建的ref也会是响应式的。toRefs(reactiveObj)将reactive对象的每个属性都转换为一个ref。这在组合函数返回reactive对象时极其有用可以保证解构不丢失响应性。function useFeature() { const state reactive({ a: 1, b: 2, }); // 返回 toRefs 转换后的结果方便使用者解构 return { …toRefs(state) }; // 相当于返回 { a: ref(1), b: ref(2) }且与内部 state 保持连接 }unref这是一个语法糖unref(x)等价于isRef(x) ? x.value : x。在编写同时接受ref或普通值的工具函数时非常有用。4. 类型系统 (TypeScript) 下的细微差别如果你使用 TypeScriptref和reactive在类型推断上会给你不同的体验。ref类型推断非常直接。const n ref(0)会推导出Refnumber。当你访问n.value时它就是number类型。reactive类型推断同样优秀但有一个著名的限制它返回的类型是原对象的响应式代理版本这个类型会丢失原始类型的个别特性例如通过泛型参数传递的构造函数类型。对于绝大多数日常使用这没有任何问题。但如果你需要严格保持与原始类型完全一致有时需要使用类型断言as或markRaw。在组合函数返回类型上的建议为了获得最佳的类型推断和开发者体验组合函数返回一个由ref组成的对象通常是更优的选择。这样在使用方解构时每个变量的类型都是清晰的RefT。5. 性能与心智模型考量在性能上ref和reactive在绝大多数场景下的差异可以忽略不计不应作为选型的主要依据。真正的考量在于“心智模型”和代码的可维护性。ref的心智模型你有一个“盒子”所有操作都通过“打开盒子”.value进行。这种显式操作在复杂逻辑中有时反而更清晰因为它强制你思考“我现在操作的是这个响应式引用本身”。reactive的心智模型你有一个“魔法对象”像普通对象一样操作即可。这更符合直觉但你必须时刻警惕“响应性丢失”的陷阱尤其是在解构和传参时。我的个人经验是在组件内部对于松散的状态多用ref对于天然成组的表单数据、页面状态对象可以考虑用reactive。在编写可复用的组合函数时除非返回的状态确实是一个紧密的整体对象否则优先返回ref或者返回经过toRefs处理的reactive对象。最后关于网络热词中提到的“vue3 孙组件 ref 访问”、“将 ref 或 reactive 数据传给 wxs”等问题其核心都在于理解响应式数据的传递和保持。访问孙组件需要通过defineExpose显式暴露跨技术栈传递如 Vue 到 WXS则需要序列化或使用特定的桥接方法因为响应式系统无法跨越运行环境。理解了ref和reactive的本质这些衍生问题也就有了排查的思路。