Vue3中ref和reactive的使用场景


一、核心区别

特性refreactive数据类型基本类型 + 对象/数组（自动解包）仅对象/数组响应式原理通过 .value 触发响应直接代理对象模板中使用自动解包（无需 .value）直接访问属性解构/传递保持响应性需用 toRefs 保持响应性
二、使用场景与案例


1. ref 的典型场景

(1) 管理基本类型值

1. import { ref } from 'vue'
   
2. 
   
3. // 计数器（数字）
   
4. const count = ref(0)
   
5. const increment = () => {
   
6.   count.value++ // 修改值必须用 .value
   
7. }
   
8. 
   
9. // 开关状态（布尔值）
   
10. const isOpen = ref(false)
    
11. const toggle = () => {
    
12.   isOpen.value = !isOpen.value
    
13. }

复制代码

(2) 引用 DOM 元素

1. <template>
   
2.   <input ref="inputRef" />
   
3. </template>
   
4. 
   
5. <script setup>
   
6. import { ref, onMounted } from 'vue'
   
7. const inputRef = ref(null)
   
8. 
   
9. onMounted(() => {
   
10.   inputRef.value.focus() // 访问 DOM 元素
    
11. })
    
12. </script>

复制代码

(3) 需要整体替换对象/数组

1. const user = ref({ name: 'Alice', age: 25 })
   
2. // 替换整个对象
   
3. user.value = { name: 'Bob', age: 30 }
   
4. 
   
5. const list = ref(['apple', 'banana'])
   
6. // 替换整个数组
   
7. list.value = ['orange', 'grape']

复制代码

2. reactive 的典型场景

(1) 复杂表单对象

1. import { reactive } from 'vue'
   
2. 
   
3. const form = reactive({
   
4.   username: '',
   
5.   password: '',
   
6.   rememberMe: false
   
7. })
   
8. 
   
9. // 直接修改属性（无需 .value）
   
10. form.username = 'John'

复制代码

(2) 嵌套数据结构

1. const nestedData = reactive({
   
2.   user: {
   
3.     profile: {
   
4.       name: 'Alice',
   
5.       address: {
   
6.         city: 'Shanghai'
   
7.       }
   
8.     }
   
9.   }
   
10. })
    
11. 
    
12. // 深层嵌套修改仍保持响应性
    
13. nestedData.user.profile.address.city = 'Beijing'

复制代码

(3) 数组操作

1. const items = reactive(['a', 'b', 'c'])
   
2. 
   
3. // 直接修改元素
   
4. items[0] = 'z' // 响应式更新
   
5. items.push('d') // 使用数组方法

复制代码

三、关键操作指南


1. 正确赋值/修改

ref 示例：

1. const count = ref(0)
   
2. 
   
3. // ✅ 正确修改
   
4. count.value = 10
   
5. 
   
6. // ❌ 错误！直接赋值会覆盖 ref 对象
   
7. count = 10

复制代码

reactive 示例：

1. const state = reactive({ count: 0 })
   
2. 
   
3. // ✅ 正确修改属性
   
4. state.count = 10
   
5. 
   
6. // ❌ 错误！直接替换对象会失去响应性
   
7. state = { count: 20 }
   
8. 
   
9. // ✅ 保持响应性的对象替换方式
   
10. Object.assign(state, { count: 20 })

复制代码

2. 处理响应式丢失

(1) 解构 reactive 对象

1. const state = reactive({ x: 1, y: 2 })
   
2. 
   
3. // ❌ 解构后失去响应性
   
4. const { x, y } = state
   
5. 
   
6. // ✅ 使用 toRefs 保持响应性
   
7. const { x, y } = toRefs(state)
   
8. x.value = 10 // 现在修改有效

复制代码

(2) 函数间传递

1. // ✅ 传递整个 reactive 对象
   
2. const user = reactive({ name: 'Alice' })
   
3. updateUser(user)
   
4. 
   
5. function updateUser(userObj) {
   
6.   userObj.name = 'Bob' // 修改仍响应
   
7. }
   
8. 
   
9. // ✅ 传递 ref 对象
   
10. const count = ref(0)
    
11. increment(count)
    
12. 
    
13. function increment(numRef) {
    
14.   numRef.value++
    
15. }

复制代码

四、性能与最佳实践

优先选择：

• 基本类型 →
  1. ref

  复制代码
• 复杂对象 →
  1. reactive

  复制代码
• 需要灵活替换 →
  1. ref

  复制代码
  （即使存储对象）
  

注意事项：

• 避免在
  1. reactive

  复制代码
  中嵌套
  1. ref

  复制代码
  （除非明确需要）
  
• 对数组进行索引操作时，建议使用变更方法（
  1. push/pop

  复制代码
  等）
  
• 大型数据集考虑
  1. shallowRef

  复制代码
  /
  1. shallowReactive

  复制代码
  提升性能
  

五、综合对比案例

1. <script setup>
   
2. import { ref, reactive } from 'vue'
   
3. 
   
4. // ref 管理用户ID（基本类型）
   
5. const userId = ref(123)
   
6. 
   
7. // reactive 管理用户详情（对象）
   
8. const userDetail = reactive({
   
9.   name: 'Alice',
   
10.   permissions: ['read', 'write']
    
11. })
    
12. 
    
13. // 修改操作示例
    
14. const updateUser = () => {
    
15.   // 修改 ref
    
16.   userId.value = 456
    
17.   
    
18.   // 修改 reactive 对象
    
19.   userDetail.name = 'Bob'
    
20.   userDetail.permissions.push('delete')
    
21. }
    
22. 
    
23. // 替换整个对象的最佳实践
    
24. const resetUser = () => {
    
25.   // ref 可以直接替换
    
26.   userId.value = 0
    
27.   
    
28.   // reactive 应该合并属性而非直接赋值
    
29.   Object.assign(userDetail, {
    
30.     name: 'Guest',
    
31.     permissions: []
    
32.   })
    
33. }
    
34. </script>

复制代码

通过以上案例可以看出：

1. ref

复制代码

更适合管理独立值和需要完全替换的场景，而

1. reactive

复制代码

在处理复杂对象结构时更直观。根据具体需求灵活选择，可显著提升代码可维护性。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/3398329op.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！