Vue2.6.14

仓库地址

vue2.6.14 源码
个人编写的-runtime 部分功能 TypeScript 版本

调试流程

1. 下载：git clone git@github.com:vuejs/vue.git --branch v2.6.14

2. 安装依赖：npm install

3. 添加 sourcemap 映射：修改package.json下的script -> dev
   

4. 在 dist 目录下，根据您的调试需求，创建相关文件，并通过相对路径的方式引入 vue
   

其他说明

• 我为什么选用 2.6.14 这个版本？ 答：

  1. Vue2.7 开始，源码的类型检测从Flow转向TypeScript。且加入了CompositionAPI的兼容，但 LZ 实际上，在做项目时，还没使用上该模式，optionAPI的写法，以及面向对象的思想。其实是比较符合我个人的开发习惯~ 因此，对我来说，去除“冗余代码”（CompositionAPI）及 TypeScript 初次支持可能会造成的不必要的问题相对来说比较重要。所以我选用的是 vue2.6.14 这个版本，也就是不考虑 Vue3 的种种新特性的版本。
  2. 因此，如果你已经了解并使用 Vue3，TypeScript 来开发你的项目，相信 Vue2.7 这个版本会更适合你的调试。

• 上述调试流程仅仅适用于vue2 源码中调试 API，而非完整的项目。

源码介绍

1. vue 入口：src/platforms/web/entry-runtime-with-compiler.js。虽然说这里是with-compiler，但如果你用脚手架创建的项目，.vue 文件编译成 render 函数这部分编译实现，是与你无关的。这里是因为，我用 html 文件引入 vue 的调试方式，所以我需要 compiler。

2. 你需要清楚 Vue 是区分运行时(src/core/**)跟编译(src/compile/**)的。这一点非常重要，从我的经验来说，你并不需要很了解 compiler。这一部分有太多词法解析的内容，如果只是为了更合理的使用 Vue2 的 API，这部分编译相关内容的帮助并不大，但如果你有充足的时间，理解directives指令对你来说比较重要。 你可以不要那么功利化，这部分内容也是值得深入了解的。PS：我在自己的调试runtime功能项目中，只是简单的把这部分 compile 功能拷贝。

3. 最核心的是core文件夹下的内容，通过该文件夹你应该可以调试到绝大部分 vue 文档提及的 API 实现。

4. 基于个人知识的有限性以及授人以鱼不如授人以渔的原则。这个文档并不会说 vue 的响应式实现core/observer、全局 API 实现core/global-api、vm 实例core/instance、vue 的虚拟 DOM 机制core/vdom、vue 的一些工具函数core/util...。请自行通过源码去探索。

参考资料

1. vue2 官方文档：为什么是 vue 而不是 react，很大程度就是因为它有更高质量，更多的中文内容。感恩~
2. 一个小型 Vue2 的实现视频：跟源码实际脱离较大，只是一步步带你实现一个体现 vue2 设计思想的项目。
3. vue2 源码系列：更多的是一些源码知识点总结，可以在源码调试遇到问题时查阅。
4. Vue.js 技术揭秘：比较旧了，但其中一些内容，还是没有实用的。