Vue 源码学习（二） - 构造函数

通过上文 [Vue 源码学习（一） - 目录结构与构建](https://github.com/zhuping/blog/issues/8)，我们了解了整个项目的目录结构，这次我们就从构造函数开始，看 vue 到 `export default Vue` 都经历了什么。

> 声明：为了更好的理解 vue 源码，我们将以完整版 umd 模块的 vue 为入口

### 构造函数

根据 `entry` 配置，找到入口文件，

```js
// src/platforms/web/entry-runtime-with-compiler.js

import config from 'core/config'
import { warn, cached } from 'core/util/index'
import { mark, measure } from 'core/util/pref'

import Vue from './runtime/index'
...

```

根据文件的引用关系找到 Vue 的构造函数所在

```js
// src/platforms/web/runtime/index.js

import Vue from 'core/index'
...

```

```js
// src/core/index.js

import Vue from './instance/index'
...

```

```js
// src/core/instance/index.js

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue
```

最终我们在 `src/core/instance/index.js` 中找到了 Vue 的构造函数，内容部分也很简单，传入一个 `options` 参数，如果是非生产环境且没用使用 `new Vue` 的方式调用函数，给出警告，然后执行 `_init` 方法。

接着经过如下

- initMixin
- stateMixin
- eventsMixin
- lifecycleMixin
- renderMixin

5个方法的包装处理，最终对外抛出 `Vue`。

我们后面的分析，也是根据这几个方法的顺序来分析，他们内部到底做了哪些处理。

### 全局API

在此之前，我们再来看下

```js
// src/core/index.js

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'

initGlobalAPI(Vue)
...

```

通过上一篇文章的目录可知，`global-api` 是负责给 Vue 构造函数挂载全局的方法(静态方法)或属性的代码。它对我们后续的代码分析很重要，所以在分析 `_init` 前，我们不妨先看看 `global-api` 具体挂载了哪些方法和属性呢？

```js
// src/core/global-api/index.js

import config from '../config'
import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'
import { set, del } from '../observer/index'
import { ASSET_TYPES } from 'shared/constants'
import builtInComponents from '../components/index'
import { observe } from 'core/observer/index'

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  Object.defineProperty(Vue, 'config', configDef)

  // exposed util methods.
  // NOTE: these are not considered part of the public API - avoid relying on
  // them unless you are aware of the risk.
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }

  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

  // 2.6 explicit observable API
  Vue.observable = <T>(obj: T): T => {
    observe(obj)
    return obj
  }

  Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  Vue.options._base = Vue

  extend(Vue.options.components, builtInComponents)

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}
```
我们来逐行看下代码，首先是在构造函数 Vue 上增加了一个 `config` 的静态只读属性，读取 `config` 返回的是 `core/config.js` 中导出的对象，如果试图修改该值时，在非生产环境下会给一个警告。

接着是扩展了 `util` 属性，增加了 `warn`，`extend`，`mergeOptions` 和 `defineReactive` 四个方法。

```js
Vue.util = {
  warn,
  extend,
  mergeOptions,
  defineReactive
}
```

然后是在 Vue 上增加了 `set`，`delete` 以及 `nextTick` 三个方法，同时在 `2.6` 以上版本，新增了 `observable` 方法，原本必须在一个 Vue 实例中配置的响应对象，现在可以在 Vue 实例外部通过 `Vue.observable(data)` 来创建了。

```js
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick

// 2.6 explicit observable API
Vue.observable = <T>(obj: T): T => {
  observe(obj)
  return obj
}
```

下面是对 `options` 属性的创建，后面的 options 合并章节中起着关键的作用。

```js
Vue.options = Object.create(null)
ASSET_TYPES.forEach(type => {
  Vue.options[type + 's'] = Object.create(null)
})

// this is used to identify the "base" constructor to extend all plain-object
// components with in Weex's multi-instance scenarios.
Vue.options._base = Vue
```

首先是创建一个空对象，然后遍历 `src/shared/constants.js` 中 `ASSET_TYPES` 数组，分创建一个空对象，

```js
// src/shared/constants.js

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]
```

经过处理后的 `options` 最终变成：

```js
Vue.options = {
  components: Object.create(null),
  directives: Object.create(null),
  filters: Object.create(null),
  _base: Vue
}
```

紧接着的这句代码：

```js
extend(Vue.options.components, builtInComponents)
```

把 `builtInComponents` 返回的值与 `Vue.options.components` 进行合并操作，

```js
// src/core/components/index.js

import KeepAlive from './keep-alive'

export default {
  KeepAlive
}
```

最终 `Vue.options` 变为：

```js
Vue.options = {
  components: {
    KeepAlive
  },
  directives: Object.create(null),
  filters: Object.create(null),
  _base: Vue
}
```

在文件最后，还有4个 init* 方法，我们再来逐个看下每个方法都是干嘛的。

```js
// src/core/global-api/use.js

export function initUse(Vue: GlobalAPI) {
  Vue.use = function(plugin: Function | Object) {
    ...
  }
}

```

该方法的作用是在 Vue 构造函数上添加 `use` 方法，该方法是用来安装 Vue 插件的。

```js
// src/core/global-api/mixin.js

export function initMixin (Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
    this.options = mergeOptions(this.options, mixin)
    return this
  }
}
```

该方法是在 Vue 上添加 `mixin` 方法，该方法是全局注册一个混入，并且会影响注册之后所有创建的每个 Vue 实例。

```js
// src/core/global-api/extend.js

export function initExtend(Vue: GlobalAPI) {
  Vue.cid = 0;
  let cid = 1;
  
  ...
  
  Vue.extend = function(extendOptions: Object): Function {
    
  }
}
```

该方法是在 Vue 上添加了 `Vue.cid` 静态属性和 `extend` 静态方法。该方法继承自 Vue 构造器，创建一个子类。

```js
// src/core/global-api/assets.js

export function initAssetRegisters(Vue: GlobalAPI) {
  ASSET_TYPES.forEach(type => {
    Vue[type] = function() {
      // ...
    }  
  })
}
```

`ASSET_TYPES` 我们已不陌生，就是上面提到的 `component`，`directive` 和 `filter`。该方法在 Vue 上增加了三个静态方法，他们分别用来全局注册组件，指令和过滤器。

我们再回溯到前面的文件，分别扩展了 `directives` 和 `components`：

```js
// src/platforms/web/runtime/index.js

import platformDirectives from './directives/index'
import platformComponents from './components/index'

extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)
```

```js
// src/platforms/web/runtime/directives/index.js

export default {
  model,
  show
}
```

```js
// src/platforms/web/runtime/components/index.js

export default {
  Transition,
  TransitionGroup
}
```

### 小结

至此整个构造函数都讲解完了，主要是通过 `global-api/index.js` 这个文件，对 Vue 的构造函数增加了许多静态属性和方法，方便后续的使用。此时 Vue 上挂载的属性和方法如下：

```js

Vue.config

Vue.util = {
  warn,
  extend,
  mergeOptions,
  defineReactive
}

Vue.set
Vue.delete
Vue.nextTick
Vue.observable

Vue.options = {
  components: {
    KeepAlive,
    Transition,
    TransitionGroup
  },
  directives: {
    model,
    show
  },
  filters: Object.create(null),
  _base: Vue
}

Vue.use
Vue.mixin
Vue.extend
Vue.cid
Vue.components
Vue.directives
Vue.filters

```

### 参考

- [Vue技术内幕](http://hcysun.me/vue-design/art/2vue-constructor.html#vue-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E7%9A%84%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95%EF%BC%88%E5%85%A8%E5%B1%80api%EF%BC%89)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue 源码学习（二） - 构造函数 #9

构造函数

全局API

小结

参考

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Vue 源码学习（二） - 构造函数 #9

Description

构造函数

全局API

小结

参考

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions