Vue 教程：深入理解 ref 与 reactive 的响应式原理与使用差异

在 Vue 3 组合式 API 中，ref 与 reactive 是创建响应式数据的两个核心工具。它们解决的核心问题是：如何让 JavaScript 数据变化自动驱动视图更新，从而摆脱手动操作 DOM 的繁琐流程。ref 适用于基本类型与需要重新赋值的场景，reactive 则更适合深层嵌套的对象结构。前置环境要求：Node.js 版本需为 ^20.19.0 或 >=22.12.0，并使用 Vue 3 项目（推荐通过 Vite 构建）。

核心概念与原理

ref 的本质是将值包装在一个带有 value 属性的对象中，通过 getter/setter 拦截对该属性的读写操作，从而实现依赖收集与触发更新。reactive 则直接使用 Proxy 代理整个对象，拦截对象属性的访问与修改。两者的底层机制不同：ref 适合单一值，reactive 适合对象。在模板中使用 ref 时，Vue 会自动解包，无需写 .value，但在 JavaScript 逻辑中必须显式访问 .value。

实战步骤与代码

首先创建 Vue 3 项目：

npm create vue@latest

按照提示选择 TypeScript 与需要的功能后，进入项目目录并启动开发服务器：

cd vue-demo
npm run serve

在组件中引入 ref 与 reactive：

import { ref, reactive } from 'vue'
// ref 用于基本类型 const count = ref(0) console.log(count.value) // 0
// reactive 用于对象 const user = reactive({ name: '张三', age: 25 }) console.log(user.name) // 张三

在模板中使用时，ref 自动解包，reactive 直接访问属性：

<template> <p>计数：{{ count }}</p> <p>用户：{{ user.name }}</p> </template>

修改数据时，ref 需要 .value，reactive 直接修改属性：

function increment() { count.value++ }

function updateName() { user.name = '李四' }

常见坑点与优化

使用 reactive 时，如果直接解构对象，会丢失响应式：

const { name } = user // 丢失响应式

正确做法是使用 toRefs 保持响应式，或直接使用 ref 存储整个对象。另外，reactive 不能直接替换整个对象，因为 Proxy 代理的是原对象引用，替换后响应式会失效。此时应改用 ref 存储对象，通过 .value 整体替换。性能优化方面，对于大型列表或频繁更新的数据，建议使用 shallowRef 或 shallowReactive 减少深层代理开销，仅在必要时触发更新。

在 Vue 2 中，选项式 API 通过 data、methods、computed 等选项组织代码，而 Vue 3 的组合式 API 提供了更灵活的逻辑复用方式。 理解 ref 与 reactive 的差异，有助于在项目中做出正确的数据管理决策，提升代码的可维护性与运行性能。