vue响应式核心是数据劫持+依赖收集+派发更新：通过object.defineproperty（vue2）或proxy（vue3）劫持属性读写，在getter中收集watcher到dep，在setter中通知更新；数组和嵌套对象递归处理，computed缓存依赖，watch深度监听需遍历取值。
Vue.js 的响应式核心不是靠轮询或脏检查，而是通过 数据劫持 + 依赖收集 + 派发更新 三位一体实现的。它在初始化时将 data 中每个属性转为 getter/setter，借助 JavaScript 的访问器属性（Object.defineProperty 在 Vue 2，Proxy 在 Vue 3）拦截读写操作，在读取时收集依赖（Watcher），在修改时通知依赖更新。
响应式数据的初始化：从 data 到可追踪对象
Vue 实例创建时，会调用 observe(data) 对 data 进行递归观测。对每个普通对象属性，使用 Object.defineProperty 重定义其 getter 和 setter：
- getter 中触发依赖收集：当组件渲染时访问 this.xxx，会进入该属性的 getter，此时当前正在执行的 Watcher（渲染 watcher）会被自动添加到该属性对应的依赖列表（Dep）中；
-
setter 中触发通知更新：当 this.xxx = newValue 被赋值，setter 触发，遍历 Dep 中所有 Watcher，调用其
update()方法，进而触发重新渲染或 computed 重新求值。
数组和特殊对象（如 Map/Set）需额外处理：Vue 2 重写了数组原型方法（push/pop/shift/unshift/splice/sort/reverse），并在内部手动触发依赖更新；Vue 3 借助 Proxy 可直接拦截所有操作，天然支持新增/删除属性与嵌套结构。
依赖收集：谁在用我？——Dep 与 Watcher 的双向绑定
每个响应式属性背后都关联一个 Dep 实例，它维护一个 Watcher 数组（subs）。Watcher 是观察者抽象，代表一个需要响应数据变化的逻辑单元（比如组件渲染函数、computed 属性、watch 回调）。
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- Watcher 构造时会把自己设为全局当前活跃 watcher（
Dep.target = this）； - 随后执行其
get()（如渲染函数），触发所有被访问属性的 getter； - 每个 getter 内部调用
dep.depend()，即dep.addSub(Dep.target)，完成一次“我在被谁依赖”的登记； - 依赖收集结束后，
Dep.target清空，避免污染后续读取。
这个过程是隐式且自动的，开发者无需手动管理依赖关系，但理解它有助于排查“数据变了视图不更新”或“多次更新只触发一次渲染”等问题。
深度监听的实现关键：递归 observe 与嵌套响应式转换
Vue 默认对 data 执行**深度响应化**。observe 函数遇到普通对象就递归调用自身，确保每一层属性都被 defineProperty 包裹；遇到数组则替换其原型方法并 observe 其元素（若为对象）；遇到基础类型（string/number/boolean/null/undefined）则跳过。
- 对象嵌套越深，初始化开销越大，这也是 Vue 2 对超大对象响应化较慢的原因之一；
- Vue 3 的
reactive()使用 Proxy，天然支持无限层级代理，且只在真正访问时才递归代理深层属性（lazy proxy），性能更优； - 对于不需要响应式的大型静态数据，可用
Object.freeze()或shallowRef/shallowReactive避免无谓劫持。
computed 与 watch 的依赖机制差异
虽然都基于同一套响应系统，但它们的依赖收集时机和行为不同：
- computed：是一个具备缓存的响应式 getter。首次取值时执行函数并收集依赖；之后只要依赖未变，直接返回缓存结果；依赖变更时标记为 dirty，下次取值才重新计算；
- watch：显式监听指定 source（可以是 ref、reactive、getter 函数），默认惰性执行（immediate: false），且每次变化都触发回调（不缓存）；deep: true 时会对 source 做递归取值以触发深层 getter，从而收集全部嵌套依赖。
注意：watch 的 deep 模式本质仍是“读一遍整个结构”，所以监听大型嵌套对象会有性能代价；而 computed 的依赖是精确到具体字段的，粒度更细。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
