Vue 3 响应式入门：ref 与 reactive

在 Vue 3 中，响应式是框架最核心的机制之一。所谓响应式，就是当数据发生变化时，页面能够自动更新，不需要我们手动操作 DOM。理解 ref 与 reactive，是用好 Vue 3 的第一步。

一、为什么需要响应式

在早期的前端开发中，数据变了，视图不会自动跟着变，开发者要自己找到元素并修改内容。数据量一大，这种做法很容易出错。Vue 3 把数据变成响应式数据：当数据被读取时，框架会记录谁在用它；当数据被修改时，框架会通知这些使用者重新渲染。这样，开发者只需要关心数据本身，视图更新交给框架完成。

二、ref：基本类型用法

ref 主要用来包装基本类型数据，例如数字、字符串和布尔值，也可以包装对象。

const count = ref(0)

const message = ref('你好')

在模板中使用时不需要写 .value，模板会自动解包，写法是 {{ count }}。在脚本中修改时必须写 .value，这是因为 ref 返回的是一个对象，真正的值保存在它的 value 属性里：

count.value++

message.value = '更新了'

如果忘记写 .value，修改的是 ref 对象本身，页面不会更新，这是新手最容易犯的错误。

三、reactive：对象用法

reactive 专门用来创建响应式对象，适合管理多个相关的字段：

const user = reactive({ name: '小明', age: 20, city: '深圳' })

在模板和脚本中都可以直接访问属性，不需要 .value：

user.age++

user.city = '广州'

模板中的写法也很自然：{{ user.name }}。reactive 内部使用代理实现，读取和修改属性都会被追踪，所以适合表单、用户信息、配置对象等场景。

四、两者区别与选择

ref 可以包装任意类型，访问时需要 .value，适合单个独立的值；reactive 只能包装对象、数组等引用类型，访问时直接写属性，适合一组相关数据。从习惯上说，简单值用 ref，成组的对象数据用 reactive。也可以把 ref 放进 reactive 对象中使用，框架会做相应的处理。

五、常见坑

第一，ref 忘记 .value。在脚本里写 count++ 是没有效果的，一定要写 count.value++。

第二，reactive 解构丢失响应性。直接写 const { name } = user，取出的 name 是普通字符串，不再响应变化。如果确实需要解构，可以使用 toRefs 转换。

第三，数组与对象注意事项。用 reactive 创建数组时，可以直接用下标修改和 push 方法；给 reactive 对象新增属性也是响应式的，但不要直接把整个对象替换成普通对象，否则会丢失响应性。

第四，不要把 ref 和 reactive 混着乱用，选定一种方式管理同一份数据，代码会更清晰。

结语

ref 与 reactive 分工明确：一个管单个值，一个管对象。掌握了 .value 的规则和解构的坑，就掌握了 Vue 3 响应式的大部分内容。建议在小项目中多写几个例子，亲自改一改数据，观察页面如何变化，这样理解会更加牢固。