响应式基础
了解 Vue 如何跟踪响应式依赖
响应式基础 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
什么是响应式
响应式是指数据发生变化时，Vue 会自动更新 DOM。
- 您在 JavaScript 中更改一个值
- Vue 检测到这一变化
- 视图重新渲染以保持一致
无需手动操作 DOM。
Vue 如何跟踪依赖
Vue 使用依赖跟踪系统。
- 渲染读取响应式值时，Vue 会记录该依赖
- 该值之后发生变化时，Vue 知道需要重新运行哪些渲染
- 这样可以让更新精准且高效
使用 ref 处理基本类型
在组合式 API 中，ref 使单个值具有响应式。
import { ref } from "vue"
const count = ref(0)
const name = ref("Ada")
count.value++ // update via .value
console.log(name.value) // read via .value模板中的 ref
在模板中，ref 会自动解包，因此可以省略 .value。
<script setup>
import { ref } from "vue"
const count = ref(0)
</script>
<template>
<p>{{ count }}</p>
<button @click="count++">Add</button>
</template>使用 reactive 处理对象
reactive 会使整个对象具有响应式。您可以直接访问属性，无需使用 .value。
import { reactive } from "vue"
const state = reactive({
count: 0,
user: { name: "Ada" }
})
state.count++
state.user.name = "Grace"ref 与 reactive
如何在两者之间选择：
- ref 适用于任何值（基本类型和对象），通过 .value 访问
- reactive 仅适用于对象，直接访问
为了保持一致，许多团队更倾向于始终使用 ref。
data 选项（Vue 2 / 选项式 API）
选项式 API 使用 data 函数。返回的每个属性都具有响应式。
export default {
data() {
return {
count: 0,
items: []
}
},
methods: {
add() { this.count++ }
}
}数组响应式的注意事项
直接进行数组索引赋值可能比较棘手，在 Vue 2 中尤其如此。
- 在 Vue 2 中，设置 arr[5] = x 不会触发更新
- Vue 3 的代理可以处理大多数情况，但仍需谨慎
为清晰和安全起见，请优先使用数组方法。
响应式数组方法
push、splice 和 pop 等修改方法都会被响应式地跟踪。
const items = reactive([1, 2, 3])
items.push(4) // reactive
items.splice(0, 1) // reactive
// Replacing an index in Vue 3 proxy:
items[0] = 99 // works in Vue 3替换与修改
更新数组有两种方式：
- 使用 push、splice 和 sort 进行修改
- 通过赋予数组一个新数组进行替换，例如使用 filter 或 map 得到的新数组
在 Vue 3 中，两种方式都会触发响应式更新。对于派生列表，替换通常更加简洁。
// Mutate
state.list.push(item)
// Replace with a filtered copy
state.list = state.list.filter(x => x.active)避免丢失响应式
解构响应式对象会让这些变量失去响应式。
- 取出属性会复制其当前值
- 解构时使用 toRefs 以保持响应式
import { reactive, toRefs } from "vue"
const state = reactive({ count: 0 })
// Keeps reactivity
const { count } = toRefs(state)快速检查
测试您对 Vue 响应式的理解。
回顾：响应式基础
您学会了 Vue 响应式的工作方式：
- Vue 会跟踪每次渲染使用了哪些数据
- ref 使值具有响应式（在 JS 中使用 .value）
- reactive 使对象具有响应式（直接访问）
- 选项式 API 使用 data 函数
- 使用数组方法和 toRefs，避免丢失响应式
下一节：计算属性。
常见问题解答
「响应式基础」课时是免费的吗？
是的 — 「响应式基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「响应式基础」这节课中我会学到什么？
了解 Vue 如何跟踪响应式依赖 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。
「响应式基础」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。