在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析:
一、源码的目录结构:
Vue的源码都在src目录下,分为6个不同功能的文件
二、源码的构建:
Vue源码是用rollup构建的,在package.json文件下,可以看到构建的脚本如下:
按照脚本的文件路径,可以在scripts/build.js找到对应的构建文件,在scripts/build.js中,可以看到这样一段代码:
上面这段代码的意思是先从config配置文件读取配置,再通过process.argv[2]获取命令行参数,对构建配置做过滤,构建出不同用途的 Vue.js。
我们再来看一下最主要的逻辑scripts/config.js文件里面的内容:
这里的单个配置是遵循 Rollup 的构建规则:
entry:表示构建的入口 JS 文件地址
dest:表示构建后的 JS 文件地址
format:表示构建的格式(cjs:表示构建出来的文件遵循 CommonJS 规范;es:构建出来的文件遵循 ES Module 规范;umd:构建出来的文件遵循 UMD 规范)
三、Runtime Only vs Runtime + Compiler
Runtime Only:
我们在使用 Runtime Only 版本的 Vue.js 的时候,通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript,因为是在编译阶段做的,所以它只包含运行时的 Vue.js 代码,因此代码体积也会更轻量。
Runtime + Compiler:
我们如果没有对代码做预编译,但又使用了 Vue 的 template 属性并传入一个字符串,则需要在客户端编译模板,因为在 Vue.js 2.0 中,最终渲染都是通过 render
函数,如果写 template
属性,则需要编译成 render
函 数,那么这个编译过程会发生运行时,所以需要带有编译器的版本,很显然,这个编译过程对性能会有一定损耗,所以通常我们更推荐使用 Runtime-Only 的 Vue.js。
四、源码入口:
在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,它的入口是 src/platforms/web/entry-runtime-with-compiler.js
上面这个文件首先import Vue from './runtime/index'导入了vue对象,然后对其prototype做了一些操作,所以我们找到'./runtime/index'
从上面这个文件中可以看到,import Vue from 'core/index'导入vue,所以我们再去'core/index'找到vue,
在'core/index'中,initGlobalAPI定义了一些vue的全局的API的方法,可以在'src/core/global-api/index.js'文件里面找到:
从以上文件中,终于看到初始化vue的API的代码!
然后我们去'./instance/index'找到Vue,它实际上就是一个用Function实现的类,我们使用的时候就是通过new Vue实例化的,后面很多xxxMixin的函数调用,它们的功能都是给 Vue 的 prototype 上扩展一些方法