Frontend Academy · 课时

ref() 与 reactive()

使用 ref() 创建响应式原始值，使用 reactive() 包装对象，并了解两者的使用时机以及如何通过 .value 访问 ref 值。

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

Vue 3 中的响应式

Vue 3 的 Composition API 使用响应式原语来跟踪状态。两个关键函数是：用于原始值的 ref()，以及用于对象的 reactive()。对它们的修改会自动更新用户界面。

使用 ref() 处理原始值

ref(value) 会将一个值包装在响应式容器中。在脚本中通过 .value 访问和修改该值。在模板中，Vue 会自动解包 ref，无需使用 .value。

<script setup>
import { ref } from 'vue';

const count = ref(0);
const name  = ref('Alice');

function increment() {
  count.value++; // .value in script
}
</script>

<template>
  <p>{{ count }}</p>  <!-- no .value in template -->
  <button @click="increment">+</button>
</template>

使用 reactive() 处理对象

reactive(object) 返回对象的深层响应式代理。您可以直接访问属性，任何地方都不需要使用 .value。

<script setup>
import { reactive } from 'vue';

const form = reactive({
  email: '',
  password: '',
  rememberMe: false
});

// Mutate directly:
form.email = 'user@example.com';
</script>

<template>
  <input v-model="form.email">
</template>

ref 与 reactive——如何选择

以下情况使用 ref()：原始值（字符串、数字、布尔值）、可为 null 的值，以及从可组合函数返回值（更容易解构）。以下情况使用 reactive()：相互关联且适合放在同一个对象中的数据。

reactive() 解构陷阱

解构响应式对象会失去响应性，因为提取出的属性是普通值，而不是响应式 ref。

const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking

// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;

toRef 与 toRefs

toRef(obj, 'key') 会创建一个与单个属性关联的 ref。toRefs(obj) 会将响应式对象的所有属性转换为彼此独立但保持关联的 ref，可以安全地进行解构。

import { toRefs } from 'vue';

const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'

使用 ref() 获取 DOM 元素

将 ref(null) 与模板中匹配的 ref 属性结合使用，即可获得对 DOM 元素或子组件实例的响应式引用。

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

const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputEl.value?.focus(); // now the DOM element is available
});
</script>

<template>
  <input ref="inputEl" type="text">
</template>

isRef 与 unref

isRef(val) 检查一个值是否为 ref。unref(val) 会解包 ref；如果传入的不是 ref，则原样返回该值。这在同时接受 ref 和普通值的可组合函数中很有用。

import { isRef, unref } from 'vue';

function double(val: Ref<number> | number) {
  return unref(val) * 2; // works with both ref and plain number
}

shallowRef 与 shallowReactive

shallowRef() 只在顶层具有响应性，不会进行深层响应式处理。shallowReactive() 对对象也是如此。当不需要深层响应性时，可以使用它们来优化性能，例如处理大型不可变数据结构时。

修改 reactive() 与替换对象

使用 reactive() 时，请直接修改属性。您不能替换整个对象，因为 reactive() 需要保持同一个引用。需要替换对象时，请使用 ref()，因为它支持 ref.value = newObject。

const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem];   // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassign

深层响应性

reactive() 默认具有深层响应性——Vue 会跟踪嵌套对象和数组的变化。这很方便，但对于非常大的对象可能会带来较高开销。在对性能敏感的场景中，请考虑使用 shallowReactive。

快速检查

为什么解构 reactive() 对象会失去响应性？

回顾：ref() 与 reactive()

ref() 用于包装原始值；在脚本中通过 .value 访问，在模板中会自动解包。reactive() 使对象具有深层响应性；请直接修改属性。解构会失去响应性，请使用 toRefs()。使用 ref(null) 获取模板元素引用。使用 shallowRef/shallowReactive 优化性能。使用 isRef/unref 处理可组合函数中的工具逻辑。

常见问题解答

「ref() 与 reactive()」课时是免费的吗？

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

「ref() 与 reactive()」这节课中我会学到什么？

使用 ref() 创建响应式原始值，使用 reactive() 包装对象，并了解两者的使用时机以及如何通过 .value 访问 ref 值。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「ref() 与 reactive()」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy