⚡ 30 秒速记

• 核心判断：响应式系统由依赖收集、变更触发和调度刷新组成，关键不在“监听数据”，而在精确关联状态与副作用
• 原理主线：围绕 「理解Vue的设计思想」、「数据响应式原理」、「Vue中的数据响应化」 建立输入、状态变化与输出之间的因果关系
• 文章范围：解析Vue的设计思想，包括MVVM框架三要素、数据响应式原理、模板引擎和渲染机制，并通过代码示例讲解Vue如何实现数据双向绑定和视图更新，帮助读者全面理解Vue的核心原理和实现方式。
• 边界与代价：Vue 2 的 defineProperty 与 Vue 3 的 Proxy 在新增属性、数组和集合类型上边界不同
• 工程落地：排查视图不更新或重复更新时，应沿读取是否被追踪、写入是否触发、任务是否被去重三段定位

Vue 的设计可以概括为数据响应式、模板编译和渲染更新三部分，它们共同把状态变化自动映射到视图。 在简化实现里，Observer 用 Object.defineProperty 包装数据，模板编译时创建 Watcher，并由每个属性对应的 Dep 收集依赖。属性写入触发 setter 后，Dep 通知相关 Watcher 执行更新函数，而不是盲目刷新全部节点。这个模型适合解释 Vue 2，数组变更和新增属性还需要额外拦截或专门的 set 处理。

这篇文章不要按 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 官方说明 制定迁移与安全策略。

理解Vue的设计思想

• MVVM框架的三要素:数据响应式、模板引擎及其渲染

• 数据响应式:监听数据变化并在视图中更新

  • Object.defineProperty()
  • Proxy

• 模版引擎:提供描述视图的模版语法

  • 插值:{<span class="vp-brace-split" aria-hidden="true"></span>{}<span class="vp-brace-split" aria-hidden="true"></span>}
  • 指令:v-bind，v-on，v-model，v-for，v-if

• 渲染:如何将模板转换为html

  • 模板 => vdom => dom

数据响应式原理