⚡ 30 秒速记
- 核心判断：响应式系统由依赖收集、变更触发和调度刷新组成，关键不在“监听数据”，而在精确关联状态与副作用
- 原理主线：围绕 「文件结构」、「调试环境搭建」、「入口」 建立输入、状态变化与输出之间的因果关系
- 文章范围：分析了Vue2源码的文件结构、构建流程、调试环境搭建及核心原理，帮助开发者深入理解Vue2的实现机制和工作原理。
- 边界与代价：
Vue 2的defineProperty与Vue 3的Proxy在新增属性、数组和集合类型上边界不同 - 工程落地：排查视图不更新或重复更新时，应沿读取是否被追踪、写入是否触发、任务是否被去重三段定位
Vue 2 的核心链路是把数据响应式、异步调度和虚拟 DOM 串起来，让状态变化最终落到真实 DOM。 初始化时，Observer 用 Object.defineProperty 拦截属性，Dep 收集组件 Watcher；变更发生后，Watcher 进入异步队列并批量执行。渲染阶段会生成新 VNode，再由 patch 比较新旧节点并更新页面。数组需要拦截变更方法，新增属性则要用 Vue.set；新项目应以 Vue 3 为基线。
这篇文章不要按 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 官方说明 制定迁移与安全策略。
# 文件结构
源码目录
# 调试环境搭建
- 安装依赖: npm i
- 安装rollup: npm i -g rollup
- 修改dev脚本，添加sourcemap，package.json
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web- full-dev",
- 运行开发命令:
npm run dev - 引入前面创建的vue.js，
samples/commits/index.html
<script src="../../dist/vue.js"></script>
术语解释:
runtime:仅包含运行时，不包含编译器common:cjs规范，用于webpack1esm:ES模块，用于webpack2+umd: universal module definition，兼容cjs和amd，用于浏览器
