不要急,我们首先从 core/instance/index.js 的上一层封装看起。
Vue 全局 API
Vue.js 首先在 core/index.js 中,对 Vue 构造函数做了一层包装,这个包装的作用,主要是提供一些全局 API:
而 initGlobalAPI 则为 Vue 添加了如下成员:
以下是详细的代码,粗略看一下即可。
从上面的代码中可以看到,Vue 在代码组织上,将 component、directive、filter 三个 API 的名字写到了一个单独的常量定义文件中(shared/constants.js),然后通过循环的方式在 Vue.options 上添加了 components、directives、filters 三个对象,并且在 components 上加上了一些内置组件,如 KeepAlive 以及 Web 平台的 Transition 和 TransitionGroup(这部分的代码没展示出来)。
此外,最后一行代码 initAssetRegisters()(位于 core/global-api/assets.js)也定义了三个 API,即 component()、directive()、filter(),用于开发者注册和引用自定义组件、指令和过滤器,即对上述定义的 options.component、options.directive、options.filter 进行读写。
由上面的分析可以知道,在 core/instance/index.js 的上层 core/index.js 中,Vue 构造函数被包装了一层,添加了一些全局 API。但这里仍然没有到我们直接引入的入口处。
入口文件
要查看入口文件,还需要从构建脚本看起。(构建脚本并不在 src 目录下,而是与之同级。)在 scripts/config.js 文件中,可以清晰地看到 Vue.js 的入口文件。
尽管以现状来看,Vue 主要应用于 Web 平台,但是为了支持 weex 之类的跨平台渲染,Vue 从代码结构上将平台相关的特性做了剥离。为了简化问题,方便更清晰地看到要点,我们以 Web 平台 Runtime build 为例,入口文件写的是 web/entry-runtime.js,实际上就是 platforms/web/entry-runtime.js,对应的打包后文件是 dist/vue.esm.js。
打开这个文件,发现它只是对导出的部分做了一个透传,直接将 platforms/web/runtime/index.js 导出了,因此最主要的逻辑还是在后面这个 JS 文件中。
我们看一下 platforms/web/runtime/index.js,这个文件的作用是为 Vue 构造函数增加了一些成员,主要有: