vue源码分析之入口文件

本文主要是介绍vue源码分析之入口文件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

Vue 全局 API

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

而 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

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

从上面的代码中可以看到，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 构造函数增加了一些成员，主要有：

• config.xxx

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

• 和

• options.components

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

这篇关于vue源码分析之入口文件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！