Vue Academy · 课时

ref 与 reactive：何时使用哪一个

Q: 「ref 与 reactive：何时使用哪一个」这节课中我会学到什么？

ref.value 访问、模板中的 reactive 解包，以及用于解构的 toRefs() 和 toRef()。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

ref.value 访问、模板中的 reactive 解包，以及用于解构的 toRefs() 和 toRef()。

ref 与 reactive：何时使用哪一个 是 CoddyKit 上的免费 Vue Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

两种响应式工具

Vue 提供了两种创建响应式状态的主要方式：ref() 和 reactive()。它们有相似之处，但分别更适合某些情况。了解何时选择哪一种，可以让代码保持整洁。

ref 可处理任意值

ref() 可以包装任何内容：数字、字符串、布尔值、数组或对象。在 JavaScript 中，该值位于 .value 上。

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

ref 在模板中自动解包

虽然在 JavaScript 中必须写 .value，但模板会自动解包顶层 ref。因此，{{ count }} 可以直接使用。

<!-- template -->
<p>{{ count }} - {{ name }}</p>

reactive 用于对象

reactive() 只接受对象（包括数组和映射）。它会返回一个深度响应式代理，您可以直接访问属性，不需要使用 .value。

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

reactive 具有深层响应性

reactive 对象中的嵌套对象和数组同样具有响应性。修改嵌套属性会触发更新，无需额外处理。

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

reactive 的限制：解构会破坏响应性

如果您解构一个 reactive 对象，提取出的变量会变成普通值，并失去响应性。这是最常见的陷阱。

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

解决方法：使用 toRefs 安全解构

toRefs() 会将响应式对象的每个属性转换为 ref。这样您就可以在保持响应性的同时进行解构，因为每个部分都是与源对象保持关联的 ref。

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

使用 toRef 处理单个属性

如果您只需要将一个属性作为 ref 使用，请调用 toRef(state, 'key')。它会与源对象保持双向同步。

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

一个实用的经验法则

对基本类型（数字、字符串、布尔值）和独立值使用 ref()。
对于组成同一个对象的一组相关属性，使用 reactive()。
从组合式函数返回响应式对象时，使用 toRefs() 包装它。

ref 也可以保存对象

您不必因为处理对象就一定选择 reactive。保存对象的 ref 同样具有深层响应性，只是需要通过 .value 访问它。许多团队为了保持一致性，会在所有地方使用 ref。

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

总结表

ref：可以保存任意值，在 JS 中需要使用 .value，在模板中会自动解包，也可以整体重新赋值。
reactive：只能保存对象，不需要 .value，具有深层响应性，但解构会破坏响应性，并且不能重新赋值。
toRefs：一种桥接工具，可让响应式属性能够被解构。

快速检查

选择合适的工具。

回顾

关键要点：

ref() 可以包装任意值，并且在 JavaScript 中需要使用 .value。
reactive() 用于对象并具有深层响应性，但解构会破坏它。
toRefs() 让您可以安全地解构响应式对象。
对基本类型使用 ref，对分组的对象状态使用 reactive。

常见问题解答

「ref 与 reactive：何时使用哪一个」课时是免费的吗？

是的 — 「ref 与 reactive：何时使用哪一个」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「ref 与 reactive：何时使用哪一个」这节课中我会学到什么？

ref.value 访问、模板中的 reactive 解包，以及用于解构的 toRefs() 和 toRef()。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「ref 与 reactive：何时使用哪一个」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy