vue源码分析四：从入口文件开始

在 web 应用下，我们来分析 Runtime + Compiler 构建出来的 Vue.js

1.npm run dev

根据package.json，执行npm run dev命令

• 构建工具是rollup，
• 然后 scripts/config.js，就知道了需要运行scripts/config.js了
• web-full-dev 是向scripts/config.js文件传递的参数

2. scripts/config.js

const builds = {
 ......
  // Runtime+compiler development build (Browser)
  '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
  },
 ......
}

function genConfig (name) {
 ...
  return config
}
//TARGET参数就是package.json中执行的命令，这里就是web-full-dev
if (process.env.TARGET) {
  //这里就暴露出出入口文件的配置
  module.exports = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}

从上述代码，配合alias.js这样入口文件我们就找到了，就是src/platforms/web/entry-runtime-with-compiler.js。

3.入口函数function vue(){}

• src/platforms/web/entry-runtime-with-compiler.js

import Vue from './runtime/index'

• src/platforms/web/runtime/index.js

import Vue from 'core/index'

这个地方的文件路径没有./什么的，是因为在用rollup打包的时候，有这么一个别名的配置const aliases = require(’./alias’)
core: resolve(‘src/core’),

• src/core/index.js

import Vue from './instance/index'

• import Vue from ‘./instance/index’ 终于找到

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) {
  //首先判断如果是不是生产环境且不是通过new关键字来创建对象的话，就在控制台打印一个warning
  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)
}
//Vue.prototype._init = function (options?: Object) {}，即this._init()
initMixin(Vue)
//$set、$delete、$watch
stateMixin(Vue)
//$on、$once、$off、$emit
eventsMixin(Vue)
//_update、$forceUpdate、$destroy
lifecycleMixin(Vue)
//$nextTick、_render、以及多个内部调用的方法
renderMixin(Vue)

export default Vue

到这里，我们知道它实际上就是一个用 Function 实现的类，我们只能通过 new Vue 去实例化它。

4. 为何 Vue 不用 ES6 的 Class 去实现呢？

我们往后看这里有很多 xxxMixin 的函数调用，并把 Vue 当参数传入，它们的功能都是给 Vue 的 prototype 上扩展一些方法（这里具体的细节会在之后的文章介绍，这里不展开）。
Vue 按功能把这些扩展分散到多个模块中去实现，而不是在一个模块里实现所有，这种方式是用 Class 难以实现的。
这么做的好处是非常方便代码的维护和管理，这种编程技巧也非常值得我们去学习。

5. initGlobalAPI

Vue.js 在整个初始化过程中，除了给它的原型 prototype 上扩展方法,还会给 Vue 这个对象本身扩展全局的静态方法。
我们按照刚才所提到的文件引入顺序一步步来看。src/core/instance/index.js执行之后，是src/core/index.js文件

//在 Vue 构造函数上挂载静态属性和方法
initGlobalAPI(Vue)
//用于判断是不是服务端渲染
Object.defineProperty(Vue.prototype, '$isServer', {
  get: isServerRendering
})

Vue.version = '__VERSION__'

Vue 在经过 initGlobalAPI 之后，会变成这样：

// src/core/index.js / src/core/global-api/index.js
Vue.config
Vue.util = util
Vue.set = set
Vue.delete = del
Vue.nextTick = util.nextTick
Vue.options = {
    components: {
        KeepAlive
    },
    directives: {},
    filters: {},
    _base: Vue
}
Vue.use
Vue.mixin
Vue.cid = 0
Vue.extend
Vue.component = function(){}
Vue.directive = function(){}
Vue.filter = function(){}

Vue.prototype.$isServer
Vue.version = '__VERSION__'

稍微复杂一点的就是 Vue.options。

按照顺序，下一个就是 platforms/web/runtime/index.js 文件了，主要做了三个方面：

1. 覆盖 Vue.config 的属性，将其设置为平台特有的一些方法
2. Vue.options.directives 和 Vue.options.components 安装平台特有的指令和组件
3. 在 Vue.prototype 上定义 patch 和 $mount

// 安装平台特定的utils
Vue.config.isUnknownElement = isUnknownElement
Vue.config.isReservedTag = isReservedTag
Vue.config.getTagNamespace = getTagNamespace
Vue.config.mustUseProp = mustUseProp
// 安装平台特定的 指令 和 组件
Vue.options = {
    components: {
        KeepAlive,
        Transition,
        TransitionGroup
    },
    directives: {
        model,
        show
    },
    filters: {},
    _base: Vue
}
Vue.prototype.__patch__
Vue.prototype.$mount

这里大家要注意的是 Vue.options 的变化

6.总结

Vue本质上就是一个用 Function 实现的 Class，然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性。