Vue3 响应式系统详解：ref 和 reactive 应该怎么选？

最新推荐文章于 2026-06-23 16:11:00 发布

原创最新推荐文章于 2026-06-23 16:11:00 发布 · 298 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript

Vue3 引入了 Composition API，核心之一就是响应式系统。

其中两个最常用的响应式工具是：

- `ref()`：包装**基本类型**或简单值
- `reactive()`：包装**对象或数组**

一、ref 是什么？

`ref()` 用于创建一个响应式变量，哪怕是数字、字符串也可以。

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 访问时需 .value

在模板中，可以直接用 {{ count }}，Vue 会自动帮你 .value。

<template>
  <button @click="count++">点击了 {{ count }} 次</button>
</template>

<script setup>
const count = ref(0)
</script>

二、reactive 是什么？

用于创建响应式对象（引用类型），推荐用在包含多个字段的结构上。

import { reactive } from 'vue'

const user = reactive({
  name: '小明',
  age: 25
})

模板中也能直接访问字段：

<template>
  <p>姓名：{{ user.name }}</p>
  <p>年龄：{{ user.age }}</p>
</template>

三、ref 与 reactive 的对比

项目	ref	reactive
适用类型	基本类型 / 任意	对象 / 数组 / 嵌套结构
取值方式	`.value`	直接访问属性
支持嵌套	不推荐（嵌套对象不是响应式）	是
模板中	可省略 `.value`	直接访问
用于表单绑定	✅ `v-model="xxx"`	✅ `v-model="user.name"`

四、常见误区和补充

1. reactive 的嵌套仍然是响应式的？

是的！

const state = reactive({
  user: {
    name: 'Jack',
    email: 'a@b.com'
  }
})

对 state.user.name 的修改是响应式的。

2. ref 包裹对象，如何访问？

const obj = ref({ a: 1 })
console.log(obj.value.a) // 注意 .value

如果你需要像 obj.a 那样使用，请用 reactive

五、实战对比 Demo

<template>
  <h2>ref 示例</h2>
  <p>{{ count }}</p>
  <button @click="count++">+1</button>

  <h2>reactive 示例</h2>
  <p>姓名：{{ user.name }}</p>
  <input v-model="user.name" />
</template>

<script setup>
import { ref, reactive } from 'vue'

const count = ref(0)
const user = reactive({
  name: 'Alice'
})
</script>

小结

基本类型 → 用 ref
对象/数组 → 用 reactive
模板中可以省略 .value
组合使用：reactive + ref 搭配是常态（如状态 + 标志位）