vue响应式系统从vue2到vue3是范式重构：vue2用object.defineproperty实现属性级劫持，存在新增属性监听等限制；vue3用proxy实现对象级代理，支持全操作拦截、细粒度依赖收集、惰性代理及显式api设计，显著提升性能、精度与可扩展性。
Vue 响应式系统的设计思想，本质是围绕“如何低成本、高精度、可扩展地建立数据与视图之间的联动关系”展开的。Vue 2 到 Vue 3 的演进不是修补式升级，而是对响应式底层模型的一次范式重构：从“属性级被动劫持”走向“对象级主动代理”，背后反映的是对开发体验、运行性能与语言特性的重新权衡。
数据劫持方式的根本转变
Vue 2 依赖 Object.defineProperty，必须在初始化阶段就遍历 data 中所有已有属性，为每个属性单独设置 getter/setter。这种方式决定了它只能监听“已存在”的属性读写，无法感知新增、删除或数组索引赋值等操作。
Vue 3 改用 Proxy 代理整个对象，拦截 get/set/deleteProperty/has/ownKeys 等 13 种基本操作。它不关心属性是否存在，只要操作发生在被代理对象上，就能统一捕获——这是能力边界上的质变。
- Vue 2 中
obj.newKey = 1不触发更新，必须写this.$set(obj, 'newKey', 1) - Vue 3 中同一条语句直接生效，无需额外 API
- 数组操作如
arr[0] = 'x'或arr.length = 0在 Vue 2 中需兜底，在 Vue 3 中原生支持
依赖收集与更新粒度的精细化
响应式不只是“监听数据变化”，更是“知道谁依赖了它”。Vue 2 的依赖收集绑定在属性 getter 上，一个组件对应一个 Watcher，更新时默认整组件重渲染，再靠虚拟 DOM Diff 找差异。
Vue 3 的 effect（替代 Watcher）仍以组件为单位组织，但内部追踪更细：编译阶段能识别静态节点、v-once、ref 标记等，跳过非响应式路径；运行时依赖也按访问路径逐层建立，比如只读 state.user.name 就不会收集 state.user.profile 的依赖。
- Vue 2：粗粒度收集，依赖关系扁平，更新范围偏大
- Vue 3：细粒度收集，依赖关系嵌套映射，更新更精准
- 这使得 Vue 3 在模板中使用大量条件分支或深层嵌套时，性能优势更明显
初始化行为与性能模型的重构
Vue 2 初始化即递归代理全部属性，无论该属性是否在模板中被使用。一个含百个字段、五层嵌套的 data 对象，会立刻生成数百个 getter/setter，带来可观的内存与时间开销。
Vue 3 采用惰性代理机制：只有当某个嵌套属性首次被访问（例如 render 中读取 state.items[0].title），才会对 items[0] 创建 Proxy。未访问的分支完全不参与响应式系统，大幅降低冷启动负担。
- 大型表单、配置对象、树形结构等场景下，Vue 3 首屏更快、内存占用更低
- 这种“按需响应”的思路，也延伸到了 Map/Set/WeakMap 等原生集合类型的支持上
- Vue 2 完全不支持这些结构的响应式，Vue 3 原生兼容
API 设计与开发者契约的进化
Vue 2 的响应式能力隐含在 data 选项中，开发者只需声明对象，框架自动处理。但这也导致边界模糊：哪些操作有效、哪些需要特殊 API，得靠文档记忆。
Vue 3 将响应式显式拆解为函数：reactive 处理对象/数组，ref 处理原始值和 DOM 引用，shallowRef/readonly 等提供控制粒度。这种分层让意图更清晰，也便于 TypeScript 推导和逻辑复用。
- 不再有“this.xxx 是响应式还是普通值”的困惑，类型和行为由创建方式决定
- Composition API 中，多个 ref/reactive 可自由组合、提取、测试，逻辑复用不再依赖 mixins 或 HOC
- 响应式不再是黑盒，而是一组可组合、可调试、可预测的工具集
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
