Vue 3组合式API中ref与reactive的核心响应式差异及使用最佳实践是什么？

---

url: /posts/be04b02d2723994632de0d4ca22a3391/
title: Vue 3组合式API中ref与reactive的核心响应式差异及使用最佳实践是什么？
date: 2025-11-12T06:00:47+08:00
lastmod: 2025-11-12T06:00:47+08:00
author: cmdragon

summary:
Vue 3的组合式API中，ref()和reactive()是创建响应式数据的核心工具。ref()可包裹任意值类型，通过.value访问，模板中自动解包；reactive()仅支持对象/数组，直接访问属性，但替换整个对象会丢失响应式。ref()更灵活，推荐优先使用，避免reactive()的解构和替换陷阱。toRefs()可将reactive()对象的属性转为ref()，保持响应式。浅响应式工具如shallowRef()和shallowReactive()适用于优化大型对象性能。

categories:

• vue

tags:

• 基础入门
  • Vue 3
• 组合式API
• ref()
• reactive()
• 响应式数据
• 最佳实践
• 常见报错

---

扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

发现1000+提升效率与开发的AI工具和实用程序：https://tools.cmdragon.cn/

组合式API的核心响应式工具：ref()与reactive()

在Vue 3的组合式API中，**ref()和reactive()**是创建响应式数据的两大核心工具。它们基于Vue的 Proxy 响应式系统，但适用场景和使用方式有明显区别。

1.1 ref()：包裹一切值的响应式容器

ref()是组合式API中最常用的响应式工具，它可以包裹任意值类型（基本类型如number、string，或对象、数组等复杂类型），返回一个ref对象。ref对象通过.value属性访问或修改内部值，而在模板中会自动解包（无需写.value）。

基础使用示例：

<script setup>
// 1. 从vue导入ref
import { ref } from 'vue'// 2. 用ref包裹初始值0，count是ref对象
const count = ref(0)// 3. 修改ref的值：必须通过.value访问
function increment() {count.value++ // 触发响应式更新
}
</script><template><!-- 4. 模板中自动解包，直接用count --><button @click="increment">Count: {{ count }}</button>
</template>

关键特性：

• 支持所有值类型：无论是count = ref(0)（基本类型）还是user = ref({ name: 'Alice' })（对象），都能保持响应式。
• 可传递性：ref对象可以安全地传递给函数或组件，不会丢失响应式（因为传递的是对象引用）。
• 模板自动解包：在<template>中使用ref时，Vue会自动读取.value，无需手动写。

1.2 reactive()：对象的响应式代理

reactive()用于将对象或数组转换为响应式代理。它会递归地将对象的所有嵌套属性转为响应式（深响应式），但仅支持对象类型（不能包裹基本类型如reactive(0)）。

基础使用示例：

<script setup>
import { reactive } from 'vue'// 1. 用reactive创建响应式对象
const form = reactive({name: 'Alice',email: '[e-mail]'
})// 2. 直接修改对象属性，触发响应式
function updateName() {form.name = 'Bob' // 无需.value，直接改属性
}
</script><template><div>Name: {{ form.name }}</div><button @click="updateName">Update Name</button>
</template>

关键特性：

• 深响应式：修改嵌套属性（如form.address.city = 'Beijing'）或数组（如form.tags.push('Vue')）都会触发更新。
• Proxy 特性：返回的是原对象的 Proxy 代理，原对象本身不会变成响应式（修改原对象不会触发更新）。

1.3 ref() vs reactive()：核心区别

特性	ref()	reactive()
支持的值类型	所有类型（基本+对象）	仅对象/数组
值访问方式	需.value（脚本中）	直接访问属性
替换整个值	支持（count.value = 1）	不支持（替换对象会丢失响应式）
解构的影响	解构后仍保持响应式（用toRefs）	解构后丢失响应式

响应式数据的最佳实践

掌握ref和reactive的区别后，我们可以总结出组合式API中响应式数据的最佳实践，避免常见陷阱。

2.1 优先使用ref()：更灵活，更少陷阱

ref()的灵活性远超reactive()，几乎可以覆盖所有场景：

• 对于基本类型（如计数器、开关），ref是唯一选择；
• 对于对象/数组，用ref()包裹（如const form = ref({ name: '' })）比reactive()更安全——因为可以直接替换整个对象（form.value = { name: 'Bob' }），而不会丢失响应式。

反例（不推荐）：

// 用reactive创建对象，替换后丢失响应式
let form = reactive({ name: 'Alice' })
form = reactive({ name: 'Bob' }) // 错误：原form的响应式连接断开

正例（推荐）：

// 用ref包裹对象，替换整个值仍保持响应式
const form = ref({ name: 'Alice' })
form.value = { name: 'Bob' } // 正确：响应式保留

2.2 处理嵌套数据：深响应式与浅响应式

Vue默认对ref和reactive对象进行深响应式处理——修改嵌套属性或数组元素都会触发更新。但在某些场景下（如大型对象、外部库管理的状态），我们可以用浅响应式优化性能：

• shallowRef()：仅跟踪.value的变化，不跟踪内部属性（如const largeObj = shallowRef({ ... })）；
• shallowReactive()：仅跟踪对象的顶层属性，不跟踪嵌套属性。

示例（shallowRef的使用）：

import { shallowRef } from 'vue'// 大型对象，无需跟踪内部变化
const largeData = shallowRef({<