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 表面是创建响应式数据的工具，实则是适配不同数据形态的封装入口：

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

• 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/set trap 如何整合 track/trigger
• 最后调试一个实际组件：在 setup() 中打日志，观察 effect 创建、依赖收集、触发更新的完整链路，验证你对流程的理解

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！