vue响应式核心是读时收集依赖、改时精准通知：读取属性触发getter收集当前effect，修改属性通过setter定向通知对应依赖，未被读取的属性不触发更新，vue3用proxy替代vue2的object.defineproperty实现更完善的响应式。

Vue 的响应式核心，不是靠轮询或全量比对，而是靠“谁读了谁、谁改了谁”这两件事的精准对应。收集和通知是一体两面：读的时候记下依赖，改的时候按名册点名。

依赖怎么被收集？关键在“读取那一刻”

收集不是发生在数据定义时，也不是组件创建时，而是在首次渲染或计算执行过程中真正访问响应式属性的瞬间。比如模板里出现 {{ count }}，或 computed 中用到 this.name，都会触发对应属性的 getter（Vue 2）或 get 拦截器（Vue 3）。

• 此时 Vue 会检查当前是否有正在运行的副作用函数（如组件的 render 函数、computed 的 getter、watch 的回调），这个函数就是“活跃的 effect”
• 它会把该 effect 和当前访问的属性（比如 target 对象 + key）关联起来，存进全局依赖映射表（targetMap）中
• 每个属性都有自己独立的依赖集合，不会混淆；未被读取的属性，就不会被任何 effect 订阅

通知怎么精准触发？只喊“本子上的人”

当你执行 this.count = 5 或 reactiveObj.name = 'Alice'，setter 或 set 拦截器被激活。这时 Vue 不做广播，而是定向翻出该属性专属的依赖列表，挨个调用它们的更新逻辑。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 渲染 Watcher 收到通知后，会标记组件为“待更新”，等 nextTick 批量重跑 render 并 diff DOM
• 计算属性的 Watcher 会重新求值，并可能触发它自己的依赖链更新
• watch 创建的 Watcher 则直接执行你写的回调函数
• 没出现在这个属性依赖列表里的逻辑，完全不受影响——这是性能高效的根本

为什么有些修改不触发通知？本质是没进“本子”

依赖收集只发生在 getter 被调用时。如果某个值压根没被读过，它的依赖列表就是空的，改了也不会通知任何人。

• 对象新增属性（如 this.obj.newKey = 'x'）：Vue 2 不会自动劫持，需用 this.$set 或 Vue.set 显式转为响应式并补依赖；Vue 3 的 Proxy 天然支持，但前提是该属性在 get 过程中被访问过
• 数组索引赋值（arr[0] = x）或修改 length：Vue 2 无法拦截，需用 push/splice 等变异方法；Vue 3 的 Proxy 可拦截，但仍需确保 arr[0] 在之前被读取过，否则依赖为空
• Object.keys()、for...in 遍历响应式对象：这些操作不触发 getter，因此不会收集依赖，可能导致更新遗漏

Vue 2 和 Vue 3 的实现差异在哪？

底层机制不同，但高层语义一致：都是读时收集、改时通知。

• Vue 2 依赖 Object.defineProperty，必须提前遍历所有属性定义 getter/setter；对新增属性、数组索引、原型链操作支持弱，需要 API 补救
• Vue 3 使用 Proxy，代理整个对象，天然支持动态属性、数组方法、in/delete/for...of 等操作；依赖结构更精细（WeakMap → Map → Set），内存管理更友好
• 两者都靠一个全局活跃 effect 标识（Dep.target 或 activeEffect）来判断“此刻是谁在读”，这是收集能成立的前提

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！