前言
最近在看vue源码，一开始又毫无头绪不知从哪看起，就比如昨天我想找一个关于vnode(虚拟dom)的实现逻辑都在github找了好久，后面发现一种适合新手入门翻阅Vue源码的方式。
正文
拿Vue2举例，可以在vue/dist 里面查看到所有编译后的vue文件，文件大体可以分为以下几种
| UMD/ | CommonJS/通用JS | ES Module/ES模块 | |
|---|---|---|---|
| Full/完整 | vue.js | vue.common.js | vue.esm.js |
| Runtime-only/仅运行时 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| Full (production)/完整(生产) | vue.min.js | ||
| Runtime-only (production)/仅运行时(生产) | vue.runtime.min.js |
注释
-
Full: - 完整：包含编译器和运行时的构建。
-
Compiler: - 编译器：负责将模板字符串编译成 JavaScript 渲染函数的代码。
-
Runtime: 负责创建 Vue 实例、渲染和修补虚拟 DOM 等的代码。基本上一切都减去编译器。
-
UMD: UMD 构建可以通过
<script>标签直接在浏览器中使用。unpkg.com/vue上Unpkg CDN 的默认文件是运行时 + 编译器 UMD 构建 (vue.js)。 -
CommonJS:CommonJS的建立旨在用于与旧捆扎机像browserify或的WebPack 1。这些打包器 (
pkg.main)的默认文件是仅运行时的 CommonJS 构建 (vue.runtime.common.js)。 -
ES Module: ES 模块构建旨在与现代打包器（如webpack 2或rollup）一起使用。这些捆绑器 (
pkg.module)的默认文件是仅限运行时的 ES 模块构建 (vue.runtime.esm.js)。
好处
因为编译后文件相当于把所有vue有用的代码打包到一起，代码调用关系很清晰，所以我建议找到 vue.esm.js或Vue.js 去阅读，并且内部拥有所有调用关系，并且保证了所有代码都有调用的和使用。以及尤大的注释。这样就可以直接阅读到最核心的观察者模式、虚拟dom、tick更新队列等。
如vue.esm.js中的观察者实例代码
和 proxy 重写 gat set的双向绑定实现
除此之外也可以下载下来此文件，进行调试调用，一步一步按照顺序看下原理实现步骤。
剩下的vue源码秘密就需要大家去探索了！源码交流详细问题，可以加我vx一起讨论一起进步~
