Vue响应式原理基于数据劫持与依赖追踪：Vue 2用Object.defineProperty劫持属性getter/setter收集和通知依赖，Vue 3用Proxy实现更完整的拦截；需注意操作边界以确保更新触发。

Vue 是一个用于构建用户界面的渐进式 JavaScript 框架，核心目标是通过简洁的 API 实现数据驱动的视图更新。它不强制你采用一整套工程方案，而是可以从小部件开始逐步集成到现有项目中。

Vue 的响应式原理基于数据劫持 + 依赖追踪

Vue 2 使用 Object.defineProperty 劫持对象属性的读取（getter）和设置（setter），在 getter 中收集依赖（即哪些 Watcher 关注了这个属性），在 setter 中通知依赖更新。

• 初始化时，Vue 把 data 对象的所有属性转换为响应式：每个属性都有独立的 getter/setter
• 模板编译或计算属性执行时，会触发属性读取，此时当前活跃的 Watcher 被自动加入该属性的依赖列表
• 当属性被修改，setter 触发，遍历依赖列表，让所有相关 Watcher 重新求值或更新 DOM

Vue 3 改用 Proxy 实现更完整的响应式

Proxy 可以拦截整个对象的操作（包括新增/删除属性、数组索引、has、in 等），解决了 Vue 2 中无法检测对象新增属性、数组直接索引赋值等问题。

• 响应式系统基于 reactive() 和 ref() 创建代理对象或包装值
• 依赖收集仍发生在 getter 阶段，但由 track() 和 trigger() 统一管理
• 副作用函数（如 setup 中的 computed、watch）自动成为响应式依赖，无需手动 new Watcher

响应式不是魔法，有明确边界

理解哪些操作能触发更新，有助于避免常见问题：

• 对象新增属性需用 Vue.set(obj, key, val)（Vue 2）或直接赋值（Vue 3 中 reactive 对象支持）
• 数组索引直接赋值（arr[0] = x）或修改 length 在 Vue 2 中不会触发更新，需用 splice、push 等变异方法
• 原始值（字符串、数字、布尔）必须用 ref() 包裹才能响应式，因为 Proxy 不能代理基本类型
• 解构、展开运算符、JSON.parse() 等会丢失响应式连接，得到的是普通 JS 值

响应式背后是“依赖关系图”的自动维护

Vue 不是实时监听所有变化，而是在组件渲染时建立“数据 → 视图”的映射关系；数据变时，只精确通知关联部分更新，而非全量 diff —— 这正是高效的关键。

本质上，它是把开发者从手动 DOM 操作中解放出来，用声明式描述“状态应该对应什么视图”，框架负责同步两者。