Vue 3 中 ref和reactive的详细使用场景
一、核心区别
| 特性 | ref | reactive |
|---|---|---|
| 数据类型 | 基本类型 + 对象/数组（自动解包） | 仅对象/数组 |
| 响应式原理 | 通过 .value 触发响应 | 直接代理对象 |
| 模板中使用 | 自动解包（无需 .value） | 直接访问属性 |
| 解构/传递 | 保持响应性 | 需用 toRefs 保持响应性 |
二、使用场景与案例
1. ref 的典型场景
(1) 管理基本类型值
import { ref } from 'vue'// 计数器（数字）
const count = ref(0)
const increment = () => {count.value++ // 修改值必须用 .value
}// 开关状态（布尔值）
const isOpen = ref(false)
const toggle = () => {isOpen.value = !isOpen.value
}
(2) 引用 DOM 元素
<template><input ref="inputRef" />
</template><script setup>
import { ref, onMounted } from 'vue'
const inputRef = ref(null)onMounted(() => {inputRef.value.focus() // 访问 DOM 元素
})
</script>
(3) 需要整体替换对象/数组
const user = ref({ name: 'Alice', age: 25 })
// 替换整个对象
user.value = { name: 'Bob', age: 30 }const list = ref(['apple', 'banana'])
// 替换整个数组
list.value = ['orange', 'grape']
2. reactive 的典型场景
(1) 复杂表单对象
import { reactive } from 'vue'const form = reactive({username: '',password: '',rememberMe: false
})// 直接修改属性（无需 .value）
form.username = 'John'
(2) 嵌套数据结构
const nestedData = reactive({user: {profile: {name: 'Alice',address: {city: 'Shanghai'}}}
})// 深层嵌套修改仍保持响应性
nestedData.user.profile.address.city = 'Beijing'
(3) 数组操作
const items = reactive(['a', 'b', 'c'])// 直接修改元素
items[0] = 'z' // 响应式更新
items.push('d') // 使用数组方法
三、关键操作指南
1. 正确赋值/修改
ref 示例：
const count = ref(0)// ✅ 正确修改
count.value = 10// ❌ 错误！直接赋值会覆盖 ref 对象
count = 10
reactive 示例：
const state = reactive({ count: 0 })// ✅ 正确修改属性
state.count = 10// ❌ 错误！直接替换对象会失去响应性
state = { count: 20 } // ✅ 保持响应性的对象替换方式
Object.assign(state, { count: 20 })
2. 处理响应式丢失
(1) 解构 reactive 对象
const state = reactive({ x: 1, y: 2 })// ❌ 解构后失去响应性
const { x, y } = state // ✅ 使用 toRefs 保持响应性
const { x, y } = toRefs(state)
x.value = 10 // 现在修改有效
(2) 函数间传递
// ✅ 传递整个 reactive 对象
const user = reactive({ name: 'Alice' })
updateUser(user)function updateUser(userObj) {userObj.name = 'Bob' // 修改仍响应
}// ✅ 传递 ref 对象
const count = ref(0)
increment(count)function increment(numRef) {numRef.value++
}
四、性能与最佳实践
-
优先选择：
• 基本类型 →ref
• 复杂对象 →reactive
• 需要灵活替换 →ref（即使存储对象） -
注意事项：
• 避免在reactive中嵌套ref（除非明确需要）
• 对数组进行索引操作时，建议使用变更方法（push/pop等）
• 大型数据集考虑shallowRef/shallowReactive提升性能
五、综合对比案例
<script setup>
import { ref, reactive } from 'vue'// ref 管理用户ID（基本类型）
const userId = ref(123)// reactive 管理用户详情（对象）
const userDetail = reactive({name: 'Alice',permissions: ['read', 'write']
})// 修改操作示例
const updateUser = () => {// 修改 refuserId.value = 456// 修改 reactive 对象userDetail.name = 'Bob'userDetail.permissions.push('delete')
}// 替换整个对象的最佳实践
const resetUser = () => {// ref 可以直接替换userId.value = 0// reactive 应该合并属性而非直接赋值Object.assign(userDetail, {name: 'Guest',permissions: []})
}
</script>
通过以上案例可以看出：ref 更适合管理独立值和需要完全替换的场景，而 reactive 在处理复杂对象结构时更直观。根据具体需求灵活选择，可显著提升代码可维护性。