Vue 3响应式核心是ref和reactive：ref处理基础类型并需.value访问，模板中自动解包；reactive专用于对象数组且深层响应，不可解构赋值；computed声明派生状态；setup内组织逻辑并支持组合式函数复用。
Vue 3 的响应式能力主要靠 Composition API 实现，核心是 ref 和 reactive 两个函数。它们不是语法糖，而是响应式系统的入口，理解它们的用法和差异，就能快速上手大部分场景。
ref：处理基础类型和单个值
ref 适合字符串、数字、布尔值、null 等基础类型，也支持对象或数组（但不推荐用于深层对象）。它返回一个带 .value 属性的响应式包装对象。
- 在
<script setup>中使用时，必须通过.value读写，比如count.value++ - 在模板中自动解包，直接写
{{ count }}就行，不用加.value - 即使传入对象，ref 也只对最外层做响应式代理；深层属性变化不会触发更新（除非配合
shallowRef或toRefs）
reactive：专为对象和数组设计
reactive 接收一个普通对象或数组，返回一个 Proxy 代理后的响应式版本。它天然支持深层响应式，所有嵌套属性都可被追踪。
- 无需
.value，直接操作属性，如user.name = '李四'或list.push('Vue3') - 不能用在解构后单独使用——比如
const { name } = user会丢失响应性，此时需用toRefs(user)解构 - 不支持对
reactive返回值重新赋值（如user = {...}），只能修改其内部属性
computed：声明派生状态
当某个值依赖其他响应式数据且需要缓存时，用 computed 创建计算属性。它返回一个只读的 ref，内部自动追踪依赖。
立即学习“前端免费学习笔记（深入）”；
- 简单用法：
const doubleCount = computed(() => count.value * 2) - 带 getter/setter 的双向计算属性，适用于需要反向更新源数据的场景（如表单联动）
- 与普通 ref 不同，
computed的值不可直接赋值，否则报错
生命周期与逻辑复用准备
setup 函数是 Composition API 的执行上下文，所有响应式声明、方法定义、生命周期钩子都要在这里组织。
- 生命周期不再写在选项里，改用
onMounted、onUpdated等函数注册 - 逻辑可以抽成独立函数（如
useCounter()、useTheme()），便于跨组件复用 - 脚本中所有变量和函数默认“暴露”给模板，无需显式 return（
<script setup>语法下）
