Vue响应式系统通过数据劫持、依赖收集和派发更新三环节实现自动联动：Vue2用Object.defineProperty，Vue3用Proxy；数组方法被重写以确保响应；新增属性或索引赋值需特殊处理。
Vue.js 的响应式系统本质是一套自动联动机制：数据一改，视图立刻反应。它不靠轮询，也不靠手动刷新，而是通过“监听变化 → 记住谁在用 → 变了就通知”三个环节闭环运行。
数据劫持：让普通对象变得“可感知”
Vue 在初始化时就把 data 中的每个属性变成可观测对象：
- Vue 2 使用 Object.defineProperty 为每个属性添加 getter/setter —— 读取时触发依赖收集，赋值时触发更新通知
- Vue 3 改用 Proxy 代理整个对象，能拦截属性新增、删除、数组索引访问等更多操作，更彻底也更灵活
- 数组被特殊处理：Vue 重写了 push、pop、splice 等 7 个方法，确保这些操作也能触发响应；但直接通过
arr[0] = xxx修改则不会被侦测到
依赖收集：明确“谁在关心这个值”
不是所有代码都参与响应式，只有真正执行过、且访问过响应式数据的地方才会被记下来：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 组件首次渲染时，会执行 render 函数，过程中读取
state.count→ 触发 getter → 当前正在运行的渲染逻辑（即一个 Watcher 或 effect）就被记入该属性的依赖列表 - 计算属性、watch 监听器同理：它们内部访问响应式数据时，也会把自己注册为依赖
- 依赖不是全局记录，而是按属性粒度维护 ——
count和name各自有一套依赖集合，互不影响
派发更新：精准通知，避免无效重绘
数据修改后，并非全量刷新页面，而是只触发相关部分：
立即学习“前端免费学习笔记（深入）”；
- 赋值触发 setter（Vue 2）或 set trap（Vue 3），立即通知对应属性的 Dep 或 reactive 的依赖集合
- Dep 遍历 subs 列表，调用每个 Watcher 的
update()方法；effect 则重新执行其包裹的函数 - Vue 还有异步更新队列机制：多次连续修改会被合并成一次 DOM 更新，避免频繁重排重绘
常见陷阱与应对方式
响应式不是万能的，有些操作 Vue 无法自动追踪：
-
对象新增属性：直接
vm.obj.newKey = value不响应 → 应用Vue.set(obj, 'newKey', value)（Vue 2）或reactive({ ...obj, newKey: value })（Vue 3） -
数组索引赋值：如
arr[1] = newItem不触发更新 → 改用arr.splice(1, 1, newItem)或Vue.set(arr, 1, newItem) - 初始未声明的数据：data 中没定义的字段后期添加，不会响应 → 建议在 data 或 reactive 初始化时就声明完整结构
