Vue响应式机制通过“读取收集+修改通知”路径实现数据与视图联动：初始化时用Object.defineProperty（Vue 2）或Proxy（Vue 3）劫持属性，读取时收集依赖，修改时触发更新，依赖链确保精准局部刷新。
Vue 的响应式 API 和组件更新不是两个独立模块，而是一套紧密咬合的协作机制：数据一变，视图就动，中间没有手动触发环节。关键在于 Vue 在初始化时就为数据和视图之间建立了可追踪的依赖链。
响应式数据如何被“标记”出来
Vue 2 使用 Object.defineProperty 劫持 data 对象每个属性的 get/set；Vue 3 则用 Proxy 拦截整个对象的读写操作。无论哪种方式，目的都是在数据被访问（get）时收集依赖，在被修改（set 或 set trap）时通知更新。
- data 中的普通对象会被递归处理，子属性也变成响应式
- 数组通过重写 push/pop/shift/unshift/splice/sort/reverse 等方法实现变化可侦测
- 新增属性或删除属性在 Vue 2 中不会触发更新，需用
Vue.set或vm.$set；Vue 3 的 Proxy 天然支持这些操作
组件渲染时怎样建立“谁用过谁”关系
组件首次渲染会执行 render 函数，过程中访问到的响应式属性会触发其 getter —— 此时 Vue 会把当前组件的 Watcher（Vue 2） 或 effect（Vue 3） 记录进该属性的依赖列表中。
- 这个过程叫“依赖收集”，发生在模板编译后的虚拟 DOM 渲染阶段
- 每个响应式属性背后都关联一个依赖容器（Dep 或 targetMap），存着所有依赖它的 watcher/effect
- 计算属性、watch、模板插值等所有读取响应式数据的地方，都会参与依赖收集
数据变动后，组件怎么知道要重绘
当响应式数据被修改，setter 或 Proxy 的 set trap 被触发，它不直接更新 DOM，而是调用依赖容器的 notify 方法，遍历并唤醒所有关联的 watcher/effect。
立即学习“前端免费学习笔记（深入）”；
- Watcher 会标记自己为“待更新”，进入异步更新队列（nextTick）
- 多个数据变更可能合并为一次更新，避免重复渲染
- effect（Vue 3）执行时会重新运行对应的函数（如 render 或 watch 回调），从而驱动视图刷新或逻辑响应
ref 和 reactive 在联动中扮演什么角色
ref 是包装基本类型或需要保持引用的响应式入口，内部其实也是靠 Proxy 或 defineProperty 实现，模板中自动解包（{{ count }} 不用写 count.value）；reactive 专用于对象，返回的是代理后的响应式对象，直接访问属性即可。
- 两者最终都会接入同一套依赖追踪系统：读取时收集，修改时派发
- 组合式 API 中，setup 里定义的 ref/reactive 变量，只要在 template 或 computed/watch 中被使用，就自然进入响应式联动链条
- 深层嵌套对象用 reactive 更直观；单个值或需要跨上下文传递时，ref 更灵活
