Vue3学习第三课： ref 与 reactive 选择指南

案例代码放在components/HelloWorld.vue中即可，第一课中创建的工程

一、实验目标

验证 ref 与 reactive 对基本类型和引用类型的响应式支持情况
对比两者在解构赋值、嵌套对象、组件传参场景下的表现差异
理解 ref 自动解包的底层逻辑

二、实验步骤

实验 1：基本类型的响应式支持

代码

html 复制代码

<template>
  <div class="demo">
    <h3>实验 1：基本类型响应式</h3>
    <p>ref 数字：{{ numRef }}</p>
    <p>reactive 数字：{{ numReactive }}</p>
    <button @click="updateNum">修改数值</button>
  </div>
</template>

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

// ref 包裹基本类型
const numRef = ref(0)
// reactive 包裹基本类型
const numReactive = reactive(0) // 注意：此处有警告

const updateNum = () => {
  numRef.value++ // ref 需要通过 .value 修改
  numReactive++ // reactive 直接修改
}
</script>

运行结果

ref 包裹的数字：点击按钮后数值实时更新（响应式生效）

reactive 包裹的数字：点击按钮后数值不更新 ，且控制台报错：value cannot be made reactive: 0

reactive 不支持直接包裹基本类型 （Number、String、Boolean、Null、Undefined、Symbol），仅能代理对象 / 数组等引用类型；ref 专门用于处理基本类型的响应式，通过 .value 访问和修改

实验 2：引用类型的响应式支持

代码

html 复制代码

<template>
  <div class="demo">
    <h3>实验 2：引用类型响应式</h3>
    <p>ref 对象：{{ userRef.name }}，年龄：{{ userRef.age }}</p>
    <p>reactive 对象：{{ userReactive.name }}，年龄：{{ userReactive.age }}</p>
    <button @click="updateUser">修改用户信息</button>
  </div>
</template>

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

// ref 包裹对象
const userRef = ref({ name: '张三', age: 20 })
// reactive 包裹对象
const userReactive = reactive({ name: '李四', age: 22 })

const updateUser = () => {
  // ref 修改对象属性（无需 .value 访问属性，仅修改根值时需要）
  userRef.value.name = '张三-更新'
  userRef.age = 21 // 模板中自动解包，脚本中修改属性也可省略 .value？不，实际需要 .value，此处是 Vue 语法糖
  // reactive 直接修改属性
  userReactive.name = '李四-更新'
  userReactive.age = 23
}
</script>

运行结果

两者修改对象属性后，页面均实时更新（响应式生效）

脚本中修改 ref 对象的属性时，userRef.value.name 和 userRef.name 均生效（Vue3 语法糖优化），但推荐显式写 .value 保持一致性

ref 和 reactive 均支持包裹引用类型（对象、数组），且对嵌套属性的响应式处理一致；区别在于访问方式：ref 需要通过 .value 访问根对象，reactive 可直接访问属性。

实验 3：解构赋值后的响应式保留

代码

html 复制代码

<template>
  <div class="demo">
    <h3>实验 3：解构赋值响应式</h3>
    <p>ref 解构：{{ nameRef }}，{{ ageRef }}</p>
    <p>reactive 解构：{{ nameReactive }}，{{ ageReactive }}</p>
    <p>reactive + toRefs 解构：{{ nameToRefs }}，{{ ageToRefs }}</p>
    <button @click="updateDeconstruct">修改解构后的值</button>
  </div>
</template>

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

// ref 解构
const { name: nameRef, age: ageRef } = ref({ name: '王五', age: 25 })
// reactive 直接解构
const { name: nameReactive, age: ageReactive } = reactive({ name: '赵六', age: 26 })
// reactive + toRefs 解构
const userToRefs = reactive({ name: '孙七', age: 27 })
const { name: nameToRefs, age: ageToRefs } = toRefs(userToRefs)

const updateDeconstruct = () => {
  nameRef.value = '王五-更新' // ref 解构后仍需 .value
  ageReactive = 26 // 报错：Assignment to constant variable（非响应式，且是常量）
  nameToRefs.value = '孙七-更新' // toRefs 解构后需 .value，响应式生效
}
</script>

运行结果

ref 解构后：修改 .value 可保留响应式（页面更新）

reactive 直接解构：解构后的值变成普通变量（非响应式，修改报错）

reactive + toRefs 解构：解构后仍为响应式，修改 .value 可实时更新

reactive 直接解构会丢失响应式（本质是解构出普通值，脱离 Proxy 代理）

ref 解构后仍保留响应式（因为解构出的是 Ref 实例，需通过 .value 修改）

若需解构 reactive 对象并保留响应式，必须使用 toRefs 转换为 Ref 实例集合

三、核心理论

1. 底层实现原理差异

ref 的本质：「包装器 + Proxy」

ref 用于基本类型时：创建一个 RefImpl 实例（包装器对象），通过 Object.defineProperty 劫持 value 属性的 get 和 set 方法，实现响应式。
ref 用于引用类型时：value 属性会被 Vue 自动转换为 reactive Proxy 对象，因此嵌套属性的响应式本质是 Proxy 代理。
自动解包逻辑：在模板渲染、setup 脚本中访问嵌套属性时，Vue 会自动 unwrap（解包），无需显式写 .value（但修改根值时必须写）。

reactive 的本质：「Proxy 代理」

reactive 仅能代理对象 / 数组（引用类型），通过 ES6 Proxy API 递归劫持对象的所有属性（包括嵌套属性）。
无法代理基本类型（会直接报错或失去响应式）
解构时会丢失响应式（因为解构出的是属性值，脱离了 Proxy 代理上下文）
无法检测到对象的新增 / 删除属性（需用 Vue.set 或 this.$set，Vue3 中可直接用 obj.newKey = value，但数组索引修改仍需注意）

2. 核心区别对比表

特性	ref	reactive
支持类型	基本类型 + 引用类型	仅引用类型（对象 / 数组）
访问方式	脚本中需 `.value`，模板自动解包	直接访问属性（无需 `.value`）
解构响应式	保留（解构出 Ref 实例）	丢失（需配合 toRefs）
嵌套属性响应式	自动支持（value 为 Proxy）	自动支持（递归 Proxy）
组件传参表现	模板自动解包，使用简洁	需手动解构或传递整个对象
性能开销	基本类型：低；引用类型：与 reactive 一致	递归代理可能有轻微开销（复杂对象）