vue源码分析之入口文件

ゝ一世哀愁。 2022-09-02 04:28 196阅读 0赞

不要急，我们首先从 core/instance/index.js 的上一层封装看起。

**Vue 全局 API**

Vue.js 首先在 core/index.js 中，对 Vue 构造函数做了一层包装，这个包装的作用，主要是提供一些全局 API：

![ff9714d720e09cad6817443df9405b2b.png][]

而 initGlobalAPI 则为 Vue 添加了如下成员：

*  Vue.config
 *  Vue.util

*  Vue.set
 *  Vue.delete

*  Vue.nextTick
 *  Vue.observable

*  Vue.options
 *  Vue.use

*  Vue.mixin
 *  Vue.extend

*  Vue.directive
 *  Vue.component

*  Vue.filter

以下是详细的代码，粗略看一下即可。

![5682f3a17b459cdc48a659c945ceeca8.png][]

![093cf8b8ad09a67656bef0cfa9b65265.png][]

从上面的代码中可以看到，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 进行读写。

![a814021bfe4f46f84d1cc7d4f99f74ce.png][]

由上面的分析可以知道，在 core/instance/index.js 的上层 core/index.js 中，Vue 构造函数被包装了一层，添加了一些全局 API。但这里仍然没有到我们直接引入的入口处。

**入口文件**

要查看入口文件，还需要从构建脚本看起。（构建脚本并不在 src 目录下，而是与之同级。）在 scripts/config.js 文件中，可以清晰地看到 Vue.js 的入口文件。

![f1e4bce2388c4aff04abf812503d96c7.png][]

尽管以现状来看，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 构造函数增加了一些成员，主要有：

*  config.xxx
 *

*  这是一个全局配置对象，加了一些与 web 平台相关的配置，例如标签 / 属性是否是 Web 平台中的保留标签 / 属性等
 *  options.directives

*  
 *  和

*  
 *  options.components

*  
 *  中扩展了一些平台相关的内置指令和内置组件

![5b55d910e8a8ebb5724d590edad3abc2.png][]

[ff9714d720e09cad6817443df9405b2b.png]: /images/20220829/6db2ab93ad3744afb815d7082764b51f.png
[5682f3a17b459cdc48a659c945ceeca8.png]: /images/20220829/27c41b01356b4a4fb2f991daf2773fec.png
[093cf8b8ad09a67656bef0cfa9b65265.png]: /images/20220829/0fc619f9a9324b8a98d140236c8474d8.png
[a814021bfe4f46f84d1cc7d4f99f74ce.png]: /images/20220829/b039a3ceca8d43e48d077a10de329bbc.png
[f1e4bce2388c4aff04abf812503d96c7.png]: /images/20220829/42e1dba31c9d4031a234db2cb88f8542.png
[5b55d910e8a8ebb5724d590edad3abc2.png]: /images/20220829/4349955d741746caa8f4513ba3f651f7.png