Vue源码分析

前言

从这一篇开始整理相关Vue源码部分的内容，如上图所示，我们从如下三点切入：<响应式原理><模板编译和组件化>，由于每个部分篇幅长度的原因，我们分为三篇进行叙述。

在开始源码分析工作之前，我们在当前篇章做好相应的准备工作，以便更好地展开分析。

准备工作

源码地址：https://github.com/vuejs/vue

将源码fork到自己的github仓库中

git clone 自己的github/vue 地址

源码目录分析

dist 打包之后的结果
examples 示例
src
	├─compiler 编译相关 
	├─core Vue 核心库 
		├─components 定义Vue中自带的keep-alive组件
		├─global-api 定义Vue中的静态方法
		├─instance 创建vue实例
		├─observer 响应式机制
		├─util 公共成员
		├─vdom 虚拟Dom
	├─platforms 平台相关代码 
	├─server SSR，服务端渲染 
	├─sfc .vue 文件编译为 js 对象 
	└─shared 公共的代码

调试设置

1. 打包

Vue 中使用的打包工具是rollup

1. 安装依赖：yarn

2. 设置sourcemap

   package.json 文件中的 dev 脚本中添加参数 --sourcemap

   "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

   -w: watch 当源码发生变化的时候立即执行打包
   -c: 指向配置文件
   --environment TARGET: 设置环境变量TARGET
   

3. 执行 dev : yarn dev
   

2. 调试

1. 打开文件examples/grid/index.html

2. 修改Vue引入位置<script src="../../dist/vue.js"></script>

3. 浏览器中运行当前html

4. debugger examples/grid/grid.js line var demo = new Vue({

Vue 中不同构建版本

命令

通过yarn build可以将不同版本的Vue都打包出来

相关文档

官方文档

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 等的代码，体积小、效率高。基本上就是除去编译器的代码。
  编译器可将template转换成render函数，运行时不可以
  推荐使用运行时版本，因为运行时版本相比完整版体积要小大约 30%
  注意： *.vue 文件中的模板是在构建时预编译的，最终打包后的结果不需要编译器，只需要运行时版本即可
  

• UMD：UMD 版本通用的模块版本，支持多种模块方式。 vue.js 默认文件就是运行时 + 编译器的UMD 版本

• CommonJS(cjs)：CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1

• ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件，为现代打包工具提供的版本

  - ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。
  - ES6 模块与 CommonJS 模块的差异: https://www.bookstack.cn/read/es6-3rd/spilt.2.docs-module-loader.md
  

查看

查看vue webpack配置文件：vue inspect > output.js

基于 Vue-CLI 创建的项目默认使用的是 vue.runtime.esm.js

入口文件查找

1. 首先找到package.json 中的dev脚本"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

2. 明确参数

   1. -c scripts/config.js 指向当前打包配置文件
   2. TARGET为当前打包的vue版本

3. 通过scripts/config.js跟踪入口文件【rollup相关配置文档】

4. 结果：src/platforms/web/entry-runtime-with-compiler.js

调用处查找

示例： $mount调用处在哪里

调试测试代码： 找到入口文件处打断点，断点进入后查看调用堆栈：Vue.$mount是在Vue._init中调用的， Vue._init()是在src/core/instance/index.js中调用的

恭喜你，已经完成了我们整个进程的准备工作，现在开始我们开始真正的源码之旅吧~