第二章：Vue3 响应式系统（从原理到实战落地）

一、入门：响应式的核心逻辑与基础API

1. 什么是响应式？简单说就是“数据变了，页面自动更变”，Vue3通过 Proxy 代理对象实现响应式，对比Vue2的Object.defineProperty，能监听数组索引变化、对象新增属性等场景。
2. 基础响应式API使用：
   • ref：用于创建基本类型（数字、字符串等）的响应式数据，使用时需通过.value访问（模板中无需加），例：const count = ref(0)，点击按钮执行count.value++，页面会自动更新。
   • reactive：用于创建对象/数组类型的响应式数据，直接访问属性无需.value，例：const user = reactive({ name: 'Vue3' })，修改user.name = 'Vue3入门'，页面同步更新。

二、精通：响应式API进阶与原理拆解

1. 进阶API使用场景（解决实际问题）：
   • toRef：为reactive对象的单个属性创建响应式引用，避免解构后失去响应式，例：const name = toRef(user, 'name')，修改name.value会同步更新user.name。
   • toRefs：将reactive对象转为普通对象，其属性都是toRef创建的响应式引用，适合解构赋值，例：const { name, age } = toRefs(user)，解构后仍保持响应式。
   • readonly：创建只读的响应式数据，防止数据被意外修改，例：const readOnlyUser = readonly(user)，修改readOnlyUser.name会报错（开发环境）。
2. 响应式原理极简理解：当用ref/reactive创建数据时，Vue会为数据创建一个“依赖收集容器”；当数据在模板或computed中被使用时，会“收集依赖”（记录使用该数据的组件/函数）；当数据被修改时，会“触发依赖”（通知所有使用该数据的地方更新），这就是“数据驱动视图”的核心逻辑。

三、实战：响应式数据在表单与列表中的应用

1. 响应式表单实战：创建“用户注册表单”，用reactive定义form对象（包含username、password、agree），绑定v-model实现“数据-表单双向同步”，例：<input v-model="form.username" placeholder="请输入用户名">，实时打印form数据，验证双向绑定效果。
2. 响应式列表实战：用reactive定义list数组（如const list = reactive([{ id: 1, text: '学习ref' }, { id: 2, text: '学习reactive' }])），通过v-for渲染列表（<div v-for="item in list" :key="item.id">{{ item.text }}</div>），实现“添加列表项”（list.push(新项)）和“删除列表项”（list.splice(index, 1)）功能，验证数组响应式是否生效。
3. 实战踩坑点：避免直接替换reactive对象（如user = { name: '新名字' }会丢失响应式），需修改属性；数组需用push/splice等方法修改，避免直接赋值索引（如list[0] = 新值，Vue3已支持，但推荐用数组方法更规范）。