Vue 源码的目录结构
src
|--compiler 编译相关：把模板转换成render函数，render函数创建虚拟DOM
|--core Vue 核心库
|------components: 定义了vue自带的keepalive组件
|------global-api: 定义了vue的静态方法，包括vue.component, vue.fuilter, vue.extend, vue.mixin, vue.use等
|------instance: 创建vue实例的位置，定义了vue的构造函数，vue的初始化，生命周期响应的函数
|------observer: 响应式机制的实现的位置
|------util: 公共成员
|------vdom: 实现虚拟dom，重写了snabbdom，增加了组件的机制
|--platforms 平台相关代码
|------web: web平台下的相关代码
|------weex: weex平台下的相关代码
|--server SSR，服务端渲染的相关代码
|--sfc 单文件组件，把.vue 文件编译为 js 对象
|--shared 公共的文件
Vue 源码的打包
Vue.js 源码的打包工具使用的是 Rollup。
- 和 Webpack 相比更加轻量；
- 在Webpack 把所有文件当做模块，Rollup 只处理 js 文件更适合在 Vue.js 这样的库中使用；
- Rollup 打包不会生产冗余的代码；
Vue 的不同构建版本
- full： vue.js、 vue.common.js、 vue.esm.js、 vue.esm.browser.js
- Runtime-only： vue.runtime.js 、vue.runtime.common.js、 vue.runtime.esm.js
- Full(production)： vue.min.js、vue.esm.browser.min.js
- Runtime-only(production)： vue.runtime.min.js
完整版：同时包含 编译器 和 运行时 的版本
编译器：用来将模版字符串编译成为 JavaScript 渲染函数的代码
运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
UMD：UMD版本通用的模板模块，支持多种模块方式，vue.js默认文件就是运行时+编译器的UMD版本。 UMD 版本可以通过
CommonJS(基于构建工具使用) ：CommonJS 版本用来配合老的打包工具比如 browserify 或 webpack1。
ES Module(直接用于浏览器)：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件：
- 为打包工具提供的 ESM：为诸如 webpack2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行 ‘tree-shaking’ 并将用不到的代码排除出最终的包。为这些打包工具提供默认文件 (pkg.module) 是只有运行时的 ES Module 构建 (vue.runtime.esm.js)
- 为浏览器提供的 ESM (2.6+)：用于在现代浏览器中通过
Runtime + Compiler vs Runtime-only
// Compiler
// 需要编译器，把 template 转换成 render 函数
const vm = new Vue({
el: '#app',
template: '<h1>{
{msg}}</h1>',
data: {
msg: 'hello vue'
}
})
// Runtime
// 不需要编译器
const vm = new Vue({
el: '#app',
render (h) {
return h('h1', this.msg)
},
data: {
msg: 'hello vue'
}
})
注意：
- 推荐使用运行时版本，因为运行时版本相比完整版体积要小大约 30%。基于 Vue-CLI 创建的项目默认使用的是 vue.runtime.esm.js。
- vue-cli创建的项目查看webpack配置的命令：vue inspect > output.js
- webpack可以为模块路径设置别名然后文件中直接import xxx from xxx的别名
- vue中的单文件组件在打包的时候会被转换成js对象，在转换的时候还会把模板转换成render函数，所以单文件组件在运行时不需要编译器
- *.vue 文件中的模板是在构建时预编译的，最终打包后的结果不需要编译器，只需要运行时版本即可
导出 Vue 的四个模块
1.src/platforms/web/entry-runtime-with-compiler.js
- web 平台相关的入口
- 重写了平台相关的 $mount() 方法
- 注册了 Vue.compiler() 方法，传递一个 HTML 字符串返回 render 函数
2.src/platforms/web/runtime/index.js
- web 平台相关
- 注册和平台相关的全局指令：v-model、v-show
- 注册和平台相关的全局组件：v-transition、v-transition-group
- 全局方法：
patch: 把虚拟 DOM 转换成真实 DOM
$mount: 挂载方法
3.src/core/index.js
- 与平台无关
- 设置了 Vue 的静态方法，initGlobalAPI(Vue)
4.src/core/instance/index.js
- 与平台无关
- 定义了构造函数，调用了 this._init(options) 方法
- 给 Vue 中混入了常用的实例成员