Vue响应式核心由Observer、Dep、Watcher协同实现：Observer劫持数据并绑定Dep，Dep管理Watcher订阅，Watcher执行更新；ref/reactive是适配不同数据形态的封装入口，最终统一接入track/trigger依赖系统。
Vue.js 的响应式 API 不是黑箱，它的设计有清晰的分层与职责边界。掌握它，关键在于理解 Observer、Dep、Watcher 三者如何协同，以及 ref / reactive 在 Vue 3 中如何桥接底层机制。不必从头手写响应式系统，但需看清源码中每一步“为什么这么设计”。
响应式核心三要素：Observer、Dep、Watcher
这三者构成 Vue 响应式系统的骨架，代码集中在 src/core/observer/ 目录下：
-
Observer 负责“劫持”数据：对对象递归定义
getter/setter，对数组重写变更方法（如push、splice）；每个被观察对象都绑定一个__ob__实例，并关联一个Dep -
Dep 是依赖“登记处”：每个
Observer持有一个Dep实例，subs数组存放所有订阅它的Watcher；depend()在读取时收集，notify()在修改时广播 -
Watcher 是更新“执行者”：分渲染 Watcher（驱动视图重绘）、计算属性 Watcher（缓存派生值）、用户 Watcher（
watch()回调）；它在实例化时求值触发依赖收集，在收到通知后入队异步更新
Vue 3 的 ref 与 reactive：不只是语法糖
ref 和 reactive 表面是创建响应式数据的工具，实则是适配不同数据形态的封装入口：
-
ref(value)返回一个带.value的对象，内部使用RefImpl类，自动判断是否嵌套reactive或保留原始值；__v_isRef标识用于运行时类型识别 -
reactive(obj)底层调用createReactiveObject，通过Proxy拦截所有操作，支持深层响应、新增/删除属性；它不暴露.value，直接操作原属性 - 二者最终都指向同一套依赖追踪系统：读取时触发
track()收集依赖，赋值时触发trigger()通知更新——只是入口和代理策略不同
关键辅助机制：$set、nextTick 与依赖收集时机
这些不是“附加功能”，而是响应式系统健壮性的保障设计：
立即学习“前端免费学习笔记（深入）”；
-
vm.$set（Vue 2）或Vue.set解决对象新增属性不可响应的问题：手动调用defineReactive并触发dep.notify，本质是补全 Observer 缺失的拦截点 -
nextTick不是简单延时，而是将 DOM 更新批量推入微任务队列（Promises/MutationObserver/setTimeout降级），避免重复渲染，其队列调度逻辑在src/core/util/next-tick.js - 依赖收集发生在“求值时刻”：组件渲染、计算属性取值、
watch回调执行时，会进入withTracking状态，此时读取响应式数据才触发dep.depend()
学习路线：从用到懂，再到改
不必一上来啃完整源码，按节奏推进更高效：
- 先写一个极简版响应式：用
Object.defineProperty实现对象响应，用Array.prototype方法重写实现数组响应，理解get/set与依赖收集的基本闭环 - 再对照 Vue 2 源码看
src/core/observer/index.js和src/core/observer/array.js，重点比对“数组为何要单独处理”“__ob__如何防止重复观察” - 接着切入 Vue 3，阅读
packages/reactivity/src/reactive.ts和ref.ts，关注Proxy的get/settrap 如何整合track/trigger - 最后调试一个实际组件：在
setup()中打日志，观察effect创建、依赖收集、触发更新的完整链路，验证你对流程的理解
