Vue源码学习笔记（一）Vue构造函数

学习中使用的Vue是v2.5.17-beta.0 Runtime+Compiler版本

本节主要讲解Vue构造函数初始化的大概流程

Vue构造函数定义

在我们使用Vue的时候，通常都是

1
2
3
new Vue({
  el: '#app'
})

那么这个Vue构造函数是从哪里来的呢？
在vue-cli搭建的项目中，我们开始开发的时候都会执行npm run dev命令，在package.json文件中可以看到dev命令实际上执行的是rollup -w -c scripts/config.js --environment TARGET:web-full-dev
找到scripts/config.js中的web-full-dev

1
2
3
4
5
6
7
8
'web-full-dev': {
  entry: resolve('web/entry-runtime-with-compiler.js'),
  dest: resolve('dist/vue.js'),
  format: 'umd',
  env: 'development',
  alias: { he: './entity-decoder' },
  banner
}

由此得知，入口文件就是web/entry-runtime-with-compiler.js
根据scripts/alias.js中配置的项目路径别名得知，入口文件完整路径是src/platforms/web/entry-runtime-with-compiler.js

1
2
// src/platforms/web/entry-runtime-with-compiler.js
import Vue from './runtime/index'
1
2
// src/platforms/web/runtime/index.js
import Vue from 'core/index'
1
2
// src/core/index.js
import Vue from './instance/index'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// src/core/instance/index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

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

经过了这么多个文件，终于找到了Vue构造函数定义的地方
为什么找一个构造函数就翻了4个文件才找到？
首先，Vue.js的源码都在src目录下，目录结构如下

1
2
3
4
5
6
7
src
├── compiler        # 编译相关
├── core            # 核心代码
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

我们从入口开始的前两个文件夹是在platforms/web下的，后来开始引入了src/core下面的代码。由代码目录结构大概就可以看出，这么做是为了复用核心代码。最终引用到src/core的代码是通用的Vue代码，不论哪个平台最终都会引入此处定义的构造函数

platforms下的代码是根据不同平台和版本不同而编写的，如我们讲解的Runtime+Compiler版本，入口是src/platforms/web/entry-runtime-with-compiler.js，而它引用Vue来自src/platforms/web/runtime/index.js，而Runtime+Compiler版本比runtime版本就是多了一个编译器，由此来看，就很简单了。在src/platforms/web/entry-runtime-with-compiler.js中引入Vue并且主要所做的事，就是给Vue添加了实例方法$mount
而在runtime版本的入口entry-runtime中，仅仅是引入了Vue，并没有做其他处理。
从这里可以看出，我们写代码的时候也可以像Vue一样，抽出通用的部分，根据不同的应用再给通用的部分添加各种定制化的功能，这样能实现代码最大程度上的复用。

Vue构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// src/core/instance/index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

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) // 给Vue.prototype添加了_init方法
stateMixin(Vue) // 添加数据相关方法$set $delete $watch 代理$data $props
eventsMixin(Vue) // 添加事件相关方法 $on $once $off $emit
lifecycleMixin(Vue) // 添加生命周期相关方法 _update $forceUpdate $destroy
renderMixin(Vue) // 添加渲染相关方法 $nextTick _render

export default Vue

在Vue构造函数定义的文件下可以看到，定义了Vue构造函数，并且提示必须使用new操作符来调用Vue；引入并执行了initMixin、stateMixin、eventsMixin、lifecycleMixin、renderMixin，由上面注释可以看出，这5个方法在Vue.prototype上添加了很多方法，这些就是我们平时能在Vue实例上使用的方法。

之前也说过，我们通过了4个文件才找到Vue构造函数的定义，接下来看看src/core/instance/index.js这也是通用的Vue定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'

initGlobalAPI(Vue)

Object.defineProperty(Vue.prototype, '$isServer', {
  get: isServerRendering
})

Object.defineProperty(Vue.prototype, '$ssrContext', {
  get () {
    /* istanbul ignore next */
    return this.$vnode && this.$vnode.ssrContext
  }
})

// expose FunctionalRenderContext for ssr runtime helper installation
Object.defineProperty(Vue, 'FunctionalRenderContext', {
  value: FunctionalRenderContext
})

Vue.version = '__VERSION__'

export default Vue

这个文件中的代码比较简单，主要执行了initGlobalAPI函数并定义了几个变量
initGlobalAPI通过名字也能看出来，初始化全局API；就是在Vue构造函数上定义了很多静态方法，调用的时候是直接使用Vue调用，而不是使用实例调用；同时还在Vue.options上初始化了一些属性
使Vue.options变成

1
2
3
4
5
6
7
8
Vue.options = {
  components: {
    KeepAlive
  },
  directives: Object.create(null),
  filters: Object.create(null),
  _base: Vue
}

通过此段Vue构造函数的分析，可以看出Vue把各个功能都分开在各个文件里，我们也可以借鉴这样的设计，会让代码看起来十分清晰，通过函数名大概就能知道各个功能的作用，并且非常利于维护。

Vue平台化的包装

前面已经知道core下的Vue是与平台无关的，在我们使用的时候还有两个platforms下的文件对Vue进行了引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// src/platforms/runtime/index.js
/* @flow */

import Vue from 'core/index'
import config from 'core/config'
import { extend, noop } from 'shared/util'
import { mountComponent } from 'core/instance/lifecycle'
import { devtools, inBrowser, isChrome } from 'core/util/index'

import {
  query,
  mustUseProp,
  isReservedTag,
  isReservedAttr,
  getTagNamespace,
  isUnknownElement
} from 'web/util/index'

import { patch } from './patch'
import platformDirectives from './directives/index'
import platformComponents from './components/index'

// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement

// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

// devtools global hook
/* istanbul ignore next */
if (inBrowser) {
  setTimeout(() => {
    if (config.devtools) {
      if (devtools) {
        devtools.emit('init', Vue)
      } else if (
        process.env.NODE_ENV !== 'production' &&
        process.env.NODE_ENV !== 'test' &&
        isChrome
      ) {
        console[console.info ? 'info' : 'log'](
          'Download the Vue Devtools extension for a better development experience:\n' +
          'https://github.com/vuejs/vue-devtools'
        )
      }
    }
    if (process.env.NODE_ENV !== 'production' &&
      process.env.NODE_ENV !== 'test' &&
      config.productionTip !== false &&
      typeof console !== 'undefined'
    ) {
      console[console.info ? 'info' : 'log'](
        `You are running Vue in development mode.\n` +
        `Make sure to turn on production mode when deploying for production.\n` +
        `See more tips at https://vuejs.org/guide/deployment.html`
      )
    }
  }, 0)
}

export default Vue

首先为Vue.config添加一些属性，Vue.config初始化是在intGlobal中，引入了core/config文件，最开始是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Vue.config = {
  optionMergeStrategies: Object.create(null),
  silent: false,
  productionTip: process.env.NODE_ENV !== 'production',
  devtools: process.env.NODE_ENV !== 'production',
  performance: false,
  errorHandler: null,
  warnHandler: null,
  ignoredElements: [],
  keyCodes: Object.create(null),
  isReservedTag: no,
  isReservedAttr: no,
  isUnknownElement: no,
  getTagNamespace: noop,
  parsePlatformTagName: identity,
  mustUseProp: no,
  _lifecycleHooks: LIFECYCLE_HOOKS
}

将会覆盖部分默认配置

接着执行

1
2
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

再次修改Vue.options，最终将Vue.options变为

1
2
3
4
5
6
7
8
9
10
11
12
13
Vue.options = {
  components: {
    KeepAlive,
    Transition,
    TransitionGroup
  },
  directives: {
    model,
    show
  },
  filters: Object.create(null),
  _base: Vue
}

之后在Vue.prototype上添加__patch__ $mount方法
再往下是开发工具相关的代码，最后导出Vue

接着看最后一个文件，就是我们的入口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* @flow */
// entry-runtime-with-compiler.js
import config from 'core/config'
import { warn, cached } from 'core/util/index'
import { mark, measure } from 'core/util/perf'

import Vue from './runtime/index'
import { query } from './util/index'
import { compileToFunctions } from './compiler/index'
import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  // ......省略
  return mount.call(this, el, hydrating)
}
Vue.compile = compileToFunctions

export default Vue

上面是省略的代码，这个文件主要做的是：缓存了Vue.prototype.$mount方法，进行了重写；添加了Vue.complie全局API。

总结

Vue构造函数的初始化大致是

图片

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

瞎折腾的<br>前端开发工程师...