⚡ 30 秒速记

• 初始化观察已有状态，建立实例访问入口
• 渲染观察者读取数据，依赖容器收集关系
• 通知先入调度队列，再执行渲染更新
• 数组变更方法有额外处理
• 按固定版本追调用链，别混入新版内部结构

读 Vue 2 源码，可以沿一次数据修改走完整条链，而不是从目录逐个背类名。 初始化时状态被观察，渲染时读取属性建立依赖，修改后通知观察者并进入更新队列，再生成新虚拟节点并应用变化。数组方法和新增属性有特殊处理，是验证理解的好边界。调试时固定源码版本，给关键读取、通知和刷新位置加断点，确认每一步为何发生。

版本校准： 本文出现 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规范，用于webpack1
• esm:ES模块，用于webpack2+
• umd: universal module definition，兼容cjs和amd，用于浏览器

入口

dev脚本中 -c scripts/config.js 指明配置文件所在

参数 TARGET:web-full-dev 指明输出文件配置项

// Runtime+compiler development build (Browser)
{
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    // 入口 dest: resolve('dist/vue.js'),// 目标文件
    format: 'umd',
    // 输出规范
    env: 'development',
    alias: {
      he: './entity-decoder'
    },
    banner,
  },
}

初始化流程

1. 入口 platforms/web/entry-runtime-with-compiler.js

扩展默认$mount方法:处理template或el选项