Javascript

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源码分析之入口文件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!