⚡ 30 秒速记

• 核心判断：响应式系统由依赖收集、变更触发和调度刷新组成，关键不在“监听数据”，而在精确关联状态与副作用
• 原理主线：围绕 「数据驱动」、「数据响应式的核心原理」、「发布订阅模式和观察者模式」 建立输入、状态变化与输出之间的因果关系
• 文章范围：介绍了Vue响应式原理的核心机制，包括数据驱动、双向绑定的实现方式，并通过代码示例模拟了Vue 2.x中Object.defineProperty的数据劫持过程，帮助读者深入理解Vue如何实现数据与视图的自动同步。
• 边界与代价：Vue 2 的 defineProperty 与 Vue 3 的 Proxy 在新增属性、数组和集合类型上边界不同
• 工程落地：排查视图不更新或重复更新时，应沿读取是否被追踪、写入是否触发、任务是否被去重三段定位

模拟 Vue 响应式的核心，是把数据访问、依赖收集和视图更新串成一条可运行的链路。 Vue 2 可用 Object.defineProperty 为属性设置 getter/setter，读取时由 Dep 收集 Watcher，修改时再通知它执行更新回调；嵌套对象还需要递归处理。Compiler 负责解析插值和指令，并在首次渲染时创建对应依赖，v-model 还要把输入变化写回数据。这个示例适合解释原理，但真实实现还包含去重、异步调度等细节；Vue 3 则以 Proxy 和 effect 为基础。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。

数据驱动

• 数据响应式、双向绑定、数据驱动
• 数据响应式
  • 数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作提高开发效率
• 双向绑定
  • 数据改变，视图改变;视图改变，数据也随之改变
  • 我们可以使用 v-model 在表单元素上创建双向数据绑定
• 数据驱动是 Vue 最独特的特性之一
  • 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

数据响应式的核心原理

Vue 2.x

• Vue 2.x深入响应式原理
• MDN - Object.defineProperty
• 浏览器兼容 IE8 以上(不兼容 IE8)