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
响应式不是魔法，有明确边界
理解哪些操作能触发更新，有助于避免常见问题：
立即学习“Java免费学习笔记（深入）”；
- 对象新增属性需用 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 操作中解放出来，用声明式描述“状态应该对应什么视图”，框架负责同步两者。
