# 前言在 Vue3 的 Composition API 中，有两个主要的响应式 API：`ref` 和 `reactive`。很多开发者，尤其是刚从 Vue2 迁移过来的同学，常常会困惑：到底该用哪一个响应式 API ？什么时候该用 `ref`？什么时候该用 `reactive`？这个问题看似简单，实则涉及 Vue3 响应式系统的核心设计理念。本文将从源码原理出发，深入剖析两者的本质区别。 # 响应式原理快速回顾 ## Proxy：Vue3 响应式的基石在深入 `ref` 和 `reactive` 之前，我们必须先理解 Vue3 响应式的核心：`Proxy` 代理。在 Vue2 中，使用的是 `Object.defineProperty` 来拦截属性的读写，但它有一个致命缺陷：无法检测属性的添加和删除，当我们需要添加属性等操作时，必须用 `Vue.set()` 或 `vm.$set()` 等方式处理。而在 Vue3 中改用 `Proxy` 进行对象代理，完美解决了这个问题： ```javascript const target = { name: 'Vue' } const handler = { get(target, key, receiver) { console.log(`读取属性: ${key}`) return Reflect.get(target, key, receiver) }, set(target, key, value, receiver) { console.log(`设置属性: ${key} = ${value}`) return Reflect.set(target, key, value, receiver) } } const proxy = new Proxy(target, handler) proxy.name // 读取属性: name proxy.name = 'Vue3' // 设置属性: name = Vue3 ``` ### Proxy 的强大之处 * 拦截所有操作：包括属性读取、赋值、删除、in 操作符等，支持 13 种数据操作的拦截 * 动态属性响应：新增属性也能被追踪 * 数组方法拦截：push、pop 等方法也能触发更新 > 关于 Proxy 的相关内容，可以查看我在《JavaScript核心机制探秘》专栏中相关的文章介绍。 ## reactive 的实现原理 `reactive` 是 Vue3 中最直接的响应式 API，它接收一个对象，返回这个对象的 Proxy 代理： ```javascript // 简化的 reactive 实现 function reactive(target) { // 创建 Proxy 代理 return new Proxy(target, { get(target, key, receiver) { // 依赖收集 track(target, key) return Reflect.get(target, key, receiver) }, set(target, key, value, receiver) { const result = Reflect.set(target, key, value, receiver) // 触发更新 trigger(target, key) return result }, deleteProperty(target, key) { const result = Reflect.deleteProperty(target, key) // 删除属性也要触发更新 trigger(target, key) return result } }) } // 使用 const state = reactive({ count: 0, user: { name: '张三' } }) state.count++ // 触发更新 state.user.name = '李四' // 嵌套对象也会被递归代理 ``` ## ref 的实现原理 `ref` 的设计要处理一个根本性问题：Proxy 只能代理对象，无法代理基础类型（string、number、boolean）。因此，Vue团队给出了一个解决方案：使用 value 属性，将基础类型值包装成一个对象，再对这个对象进行 Proxy 代理。这也是为什么 ref 响应式数据，需要用 `.value` 的方式进行访问的原因： ```javascript // 简化的 ref 实现 function ref(value) { // 创建包装对象 const wrapper = { value: value } // 将包装对象变为响应式 return reactive(wrapper) } // 更接近真实源码的实现 class RefImpl { constructor(value) { this._value = value this.__v_isRef = true // 标记这是一个 ref } get value() { // 依赖收集 track(this, 'value') return this._value } set value(newVal) { if (this._value !== newVal) { this._value = newVal // 触发更新 trigger(this, 'value') } } } function ref(value) { return new RefImpl(value) } // 使用 const count = ref(0) count.value++ // 必须通过 .value 访问 ``` 从上述代码中，我们也可以看出：`ref` 返回的本质上也是一个 `reactive` 对象！ > 关于 ref 和 reactive 的具体源码实现细节，可以参考我的《Vue3 源码解析》的相关文章。 # ref vs reactive 的核心区别 ## 访问方式：.value 的有无这是两者最直观的区别： ```javascript import { ref, reactive } from 'vue' // ref 需要 .value const count = ref(0) console.log(count.value) // 0 count.value++ console.log(count.value) // 1 // reactive 不需要 .value const state = reactive({ count: 0 }) console.log(state.count) // 0 state.count++ console.log(state.count) // 1 ``` ## 重新赋值：整体替换 vs 属性修改这其实是在 Vue3 开发中，最容易踩的一个坑，我们先来看一个例子： ```javascript // ref 支持整体替换 let user = ref({ name: '张三', age: 18 }) // ✅ 可以直接替换整个对象 user.value = { name: '李四', age: 20 } // reactive 不支持整体替换 let state = reactive({ name: '张三', age: 18 }) // ❌ 这样会丢失响应式 state = { name: '李四', age: 20 } // ✅ reactive 只能修改属性 state.name = '李四' state.age = 20 // ❌ 即使使用 Object.assign 也可能出现问题 Object.assign(state, { name: '王五', age: 22 }) // ✅ 这样可以 state = Object.assign({}, state, { name: '王五' }) // ❌ 这样不行 ``` ## 类型推导与解构 `reactive` 在使用解构时也会出现问题： ```javascript const state = reactive({ name: '张三', age: 18, profile: { city: '北京' } }) // ❌ 解构后失去响应性 const { name, age } = state name // '张三'，但不再是响应式的 // ✅ 使用 toRefs 保持响应性 const { name, age } = toRefs(state) name.value // 需要通过 .value 访问 // ✅ 单个属性用 toRef const city = toRef(state.profile, 'city') city.value = '上海' // 会触发更新 ``` 而 `ref` 在这方面的表现就很好： ```javascript // 组合式函数返回 ref 对象 function useFeature() { const count = ref(0) const name = ref('张三') return { count, name } } // 解构后依然是响应式的 const { count, name } = useFeature() count.value++ // ✅ 正常工作 ``` > 注：关于上述内容，在论坛中也存在争议：由于 `reactive` 本身设计特性，会导致响应式丢失问题。因此部分开发者（包括笔者），更推荐在实际开发中，直接使用 `ref`，弃用 `reactive`。 ## 深层响应性两者都支持深层响应，但内部实现略有不同： ```javascript const refObj = ref({ user: { name: '张三', address: { city: '北京' } } }) // 深层属性也是响应式的 refObj.value.user.address.city = '上海' // 触发更新 const reactiveObj = reactive({ user: { name: '张三', address: { city: '北京' } } }) // 同样是深层响应式 reactiveObj.user.address.city = '上海' // 触发更新 ``` # 什么时候用 ref？ ## 基础类型值这是 `ref` 的主要应用场景，因为 `reactive` 根本不能处理基础类型： ```javascript const count = ref(0) const name = ref('张三') const isLoading = ref(false) const userInput = ref('') ``` ## 需要整体替换的场景当我们的数据状态需要整体重置或替换时，`ref` 是不二之选： ```javascript // 表单数据，经常需要重置 const formData = ref({ username: '', email: '', password: '' }) // 重置表单 - ref 轻松搞定 function resetForm() { formData.value = { username: '', email: '', password: '' } } // 更新整个表单 - 从 API 获取数据后整体替换 async function loadForm(id) { const data = await api.getForm(id) formData.value = data // ✅ 直接替换 } ``` 当然，如果一定要用 reactive 呢？也是可以解决的，只是较为麻烦而已： ```javascript // 如果用 reactive，重置会很麻烦 const formDataReactive = reactive({ username: '', email: '', password: '' }) function resetFormReactive() { // 需要逐个属性重置，或者使用 Object.assign Object.assign(formDataReactive, { username: '', email: '', password: '' }) } ``` ## 从组合式函数返回时当编写可复用的组合式函数时，返回 ref 对象可以更利于解构： ```javascript export function useUser() { const user = ref(null) const loading = ref(false) const error = ref(null) async function fetchUser(id) { loading.value = true try { user.value = await api.getUser(id) } catch (e) { error.value = e } finally { loading.value = false } } // 返回 ref 对象，使用者可以随意解构 return { user, loading, error, fetchUser } } // 在组件中使用 const { user, loading, fetchUser } = useUser() // 解构后依然保持响应式 watch(user, () => {}) // ✅ 正常 ``` ## 跨组件传递时的类型安全当通过 `props` 进行父子组件通信，传递响应式数据时，`ref` 的类型更清晰： ```html ``` ## 获取子组件实例当父组件想要访问子组件的方法或数据时，可以直接使用 ref 获得子组件的实例，访问子组件通过 `defineExpose` 暴露的方法或数据：子组件 `Child.vue`： ```javascript ``` 父组件 `Parent.vue`： ```html ``` # 什么时候用 reactive？ ## 深层嵌套的对象当数据结构复杂且嵌套层级较深时，reactive 的语法更简洁： ```javascript // 复杂的状态对象 const store = reactive({ user: { profile: { personal: { name: '张三', age: 18 }, contact: { email: 'zhang@example.com', phone: '1234567890' } }, preferences: { theme: 'dark', language: 'zh-CN', notifications: { email: true, sms: false } } }, ui: { sidebar: { collapsed: false, width: 240 }, modal: { visible: false, type: null } } }) // 访问深层属性 - reactive 很方便 store.user.profile.personal.name = '李四' store.ui.sidebar.collapsed = true // 如果用 ref，每次都要 .value，略显繁琐 const storeRef = ref({ // 同样的数据结构 }) storeRef.value.user.profile.personal.name = '李四' // 多了 .value ``` ## 不需要整体替换的数据对于不需要整体替换的数据，比如配置数据等，只用初始化一次，后期只会更改属性，`reactive` 很合适： ```javascript const appConfig = reactive({ apiUrl: 'https://api.example.com', timeout: 5000, retryCount: 3, features: { logging: true, cache: false } }) // 后续只修改属性 appConfig.timeout = 10000 appConfig.features.cache = true ``` ## 性能敏感的场景虽然差别很小，但理论上 `reactive` 比 `ref` 少一层包装，性能略好： ```javascript // ref 多了一层对象包装 const refState = ref({ count: 0 }) // 访问路径: refState.value.count // reactive 直接代理原始对象 const reactiveState = reactive({ count: 0 }) // 访问路径: reactiveState.count // 在大量数据操作的场景下，reactive 可能稍有优势 ``` > 注：这种说法只是出于纯理论上的，因为实际开发中，这种性能差异在99%的场景中都可以忽略不计。 # 为什么 reactive 解构后会失去响应性？ ## 原因：解构破坏了 Proxy 的代理要想理解这个问题，还是得回到 Proxy 的工作原理中，我们先用一段简单的代码模拟 reactive 的行为： ```javascript const raw = { name: '张三', age: 18 } const proxy = new Proxy(raw, { get(target, key) { console.log(`读取 ${key}`) return target[key] }, set(target, key, value) { console.log(`设置 ${key} = ${value}`) target[key] = value return true } }) ``` 此时，我们对 `proxy` 解构 `const { name } = proxy` ，它都会发生哪些事呢？ 1. 读取 `proxy.name` ，此时会触发 get 拦截 -- 没有问题 2. 将获取到的值 `张三` 赋值给 `name` 变量 -- 问题产生了 3. `name` 被重新赋值为一个普通的字符串，和 proxy 没有任何关系了 4. 后续对 `name` 的操作都只是修改一个普通变量，不会触发任何拦截 ## 解决方案 ### 方案一：使用 toRefs（推荐） ```javascript import { reactive, toRefs } from 'vue' const user = reactive({ name: '张三', age: 18 }) // toRefs 将每个属性转换为 ref const { name, age } = toRefs(user) // 现在可以安全解构了 name.value = '李四' // ✅ 触发更新 age.value++ // ✅ 触发更新 ``` `toRefs` 的简化原理： ```javascript function toRefs(obj) { const result = {} // 遍历对象的所有key for (const key in obj) { result[key] = toRef(obj, key) // 为每个属性单独创建 ref } return result } // 创建的 ref 和原对象保持连接 const nameRef = toRef(user, 'name') nameRef.value = '李四' // 等价于 user.name = '李四' ``` ### 方案二：使用 toRef 处理单个属性 ```javascript import { reactive, toRef } from 'vue' const user = reactive({ name: '张三', age: 18 }) // 只需要处理个别属性 const name = toRef(user, 'name') const age = toRef(user, 'age') name.value = '李四' // ✅ 触发更新 ``` ### 方案三：直接用 ref 如果发现需要频繁解构，可能在一开始就应该使用 `ref`： ```javascript const user = ref({ name: '张三', age: 18 }) ``` # 选择决策树基于以上分析，我们可以建立一套清晰的选择决策树： ## 快速选择指南 ![选择决策树](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9b891de7993d4263a6579bc945c267c0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgd3VoZW5fbg==:q75.awebp?rk3s=f64ab15b&x-expires=1776298395&x-signature=RnkF9ljt1rU16oCZ6K2HjuJBai4%3D) ## 决策依据详解 | 场景 | 推荐方案 | 原因 | | --------- | ------------ | ----------------- | | 基础数据类型 | ref | reactive 无法处理基础类型 | | 需要整体重置的表单 | ref | 支持直接替换 .value | | 组合式函数返回值 | ref | 方便使用者解构 | | 复杂嵌套对象 | reactive | 语法更简洁 | | 一次性初始化配置 | reactive | 不需要整体替换 | | 需要解构的场景 | ref + toRefs | 保持响应性 | ## 最终建议 * **默认用 ref**：`ref` 更灵活，适用场景更广，虽然多了 `.value`，但换来的是确定性和可预测性 * **在特定场景用 reactive**：当需要使用复杂对象且不需要解构时，`reactive` 能让代码更简洁 * **要理解并善用工具函数**：`toRefs`、`toRef`、`isRef`、`isReactive` 等 * **团队统一规范**：无论选择哪种策略，团队内要保持一致，避免混用导致混乱 * **无法确定用哪个时**：直接用 `ref`，`ref` 是更安全、更通用的选择 # 结语 `ref` 是更安全、更通用的选择；`reactive` 则是在特定场景下的优化选择。理解了它们的设计哲学和适用场景，就能帮我们在适当的场合做出正确的选择。对于文章中错误的地方或有任何疑问，欢迎在评论区留言讨论！