vue3响应式基于proxy拦截+依赖追踪+精准通知闭环实现；ref用于基本类型和需整体替换的场景，reactive专为对象/数组深度代理设计，二者共享track/trigger内核。
Vue3 的响应式不是“魔法”，而是靠 Proxy 拦截 + 依赖追踪 + 精准通知 三步闭环实现的。ref 和 reactive 是你日常接触的接口，它们背后共享同一套响应式内核（track / trigger），但封装方式和适用边界不同。
ref：基本类型的唯一通行证，也是对象的“安全包装盒”
JavaScript 基本类型（number、string、boolean）无法被 Proxy 直接代理——因为它们不是对象。ref 就是为此而生：它把任意值（包括对象）包装成一个带 .value 属性的响应式对象。
- 对基本类型：内部用
Object.defineProperty劫持.value的 get/set，实现响应式读写 - 对对象类型：ref 内部会自动调用
reactive，把.value指向一个 Proxy 代理对象，因此也具备深层响应能力 - 模板中自动解包：写
{{ count }}等价于{{ count.value }}，省去手动写 .value 的麻烦 - 支持整体替换：比如
list.value = [1, 2, 3]，响应性不会丢失——这是它比 reactive 更灵活的关键点
reactive：专为对象/数组设计的深度代理
reactive 接收一个对象（或数组、Map、Set），直接用 Proxy 创建它的响应式代理。它不加额外包装，访问 state.count 就是访问原始属性，语法更自然。
- 只接受引用类型：传入数字或字符串会警告且无响应性
- 深度代理：嵌套对象、数组索引、新增/删除属性、Map/Set 方法调用，全部自动响应
- 不能整体替换：若写
obj = { a: 1 }，就断开了 Proxy 连接，变成普通对象——必须用Object.assign(obj, { a: 1 })或逐个赋值 - 解构即失响应：直接
const { count } = state得到的是普通值，需配合toRefs才能保持响应性
数据劫持的本质：拦截行为，而非轮询或脏检查
Vue3 不扫描数据变化，也不定时比对。它在数据被读取（get）和修改（set）的瞬间介入：
-
读取时收集依赖：模板渲染第一次访问
state.count，Proxy 的 get 拦截器触发track(state, 'count')，把当前组件的副作用函数记入该属性的依赖池 -
修改时触发更新：后续执行
state.count = 5，set 拦截器调用trigger(state, 'count')，遍历依赖池，通知所有关联的 Watcher 重新执行 - 不依赖属性预定义：Proxy 可监听动态新增属性、数组索引赋值、Map.set() 等，这是 Vue2 的 defineProperty 无法做到的
怎么选？看三个关键判断点
不用死记“基本类型用 ref，对象用 reactive”，真正决定因素是：
-
是否需要整体替换值？需要 → 选 ref（如 API 返回新列表直接赋给
list.value） - 是否是单个简单值？计数器、开关、输入框绑定 → ref 更直观
- 是否是一组强关联的字段？表单数据、用户信息对象 → reactive 写起来更清爽，避免满屏 .value
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
