Vue源码-一准备工作

目录结构

image.png

Vue的不同构建版本

• 通过npm run build 打包出所有版本的文件
• 通过 dist/READMe.md，可以获取到不同版本的解释

	UMD	CommonJS	ES Module
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

术语解释

• 完整版：同时包含编译器和运行时的版本。
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码，体积大，效率低
• 运行时：用来创建 Vue 实例，渲染并处理虚拟 DOM 等的代码，体积小，效率高。基本上就是除去编译器的代码。
• UMD：UMD 版本通用的模块版本，支持多种模块方式，包括直接挂载到window上。vue.js默认文件就是运行时 + 编译器的 UMD 版本。
• CommonJS：CommonJS版本用来配合老的打包工具比如Browserify或webpack 1。
• ES Module：从2.6开始 Vue 会提供两个 ESM 构建文件，为现代打包工具提供的版本。
  • ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行tree shaking，并将用不到的代码排除出最终的包。

寻找入口文件

• 在package.json中，找到打包的配置文件

  
  
  image.png

• 打开scripts/config.js,找到文件导出的地方
  

  image.png

• 进入genConfig()函数（按住command+鼠标左键）
  

  image.png

先看genConfig()函数的第一行，根据传入的参数获取对应的选项，在npm run dev时，我们传入了TARGET:web-full-dev

• 进入builds，找到web-full-dev
  

  image.png

• 进入resolve()函数
  

  image.png

获取到base的值：web，在aliases中找到对应的值

image.png

这样最后拼接出entry的地址：
src/platforms/web/entry-runtime-with-compiler.js
找到打包的入口文件！

---

解决一个问题

初始化时同时传入template和render，页面上会输出什么？

const vm = new Vue({
  el: '#app',
  tempalte: '
Hello Template
',
  render (h) {
    return h('h4', 'Hello Render!')
  } 
})

进去入口文件src/platforms/web/entry-runtime-with-compiler.js，找到$mount方法

image.png

• 通过查看会发现，如果传入了render，就会使用传入的render，否则使用template
• 那么$mount是什么时候被调用的呢？打开浏览器的sources,给$mount方法加上断点，通过右侧的Call Stack可以查看到$mount的调用过程：在初始化Vue实例时，调用的init，在init中调用了$mount
  
  image.png

一些其它的

• 下载vue源码后，给dev命令添加 --sourceMap,方便调试
• 收起所有代码，command + k, 展开：command + 0