入口
- 我们之前提到过 Vue.js 构建过程,在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,它的入口是
src/platforms/web/entry-runtime-with-compiler.js
;
|
|
那么,当我们的代码执行 import Vue from ‘vue’ 的时候,就是从这个入口执行代码来初始化 Vue
Vue 的入口
在这个入口 JS 的上方我们可以找到 Vue 的来源:import Vue from './runtime/index'
,我们先来看一下这块儿的实现,它定义在 src/platforms/web/runtime/index.js
中:
|
|
这里关键的代码是 import Vue from 'core/index'
,之后的逻辑都是对 Vue 这个对象做一些扩展,可以先不用看,我们来看一下真正初始化 Vue 的地方,在 src/core/index.js
中:
|
|
这里有 2 处关键的代码,import Vue from './instance/index' 和 initGlobalAPI(Vue)
,初始化全局 Vue API(我们稍后介绍),我们先来看第一部分,在 src/core/instance/index.js
中:
#Vue 的定义
|
|
在这里,我们终于看到了 Vue 的庐山真面目,它实际上就是一个用 Function 实现的类,我们只能通过 new Vue 去实例化它。
- 为何 Vue 不用 ES6 的 Class 去实现呢?我们往后看这里有很多 xxxMixin 的函数调用,并把 Vue 当参数传入,它们的功能都是给 Vue 的 prototype 上扩展一些方法(这里具体的细节会在之后的文章介绍,这里不展开),Vue 按功能把这些扩展分散到多个模块中去实现,而不是在一个模块里实现所有,这种方式是用 Class 难以实现的。这么做的好处是非常方便代码的维护和管理,这种编程技巧也非常值得我们去学习。
initGlobalAPI
Vue.js 在整个初始化过程中,除了给它的原型 prototype 上扩展方法,还会给 Vue 这个对象本身扩展全局的静态方法,它的定义在 src/core/global-api/index.js
中:
|
|
这里就是在 Vue 上扩展的一些全局方法的定义,Vue 官网中关于全局 API 都可以在这里找到.有一点要注意的是,Vue.util 暴露的方法最好不要依赖,因为它可能经常会发生变化,是不稳定的。