共计 6234 个字符，预计需要花费 16 分钟才能阅读完成。
从入口开始
咱们之前提到过 Vue.js 构建过程，在 web 利用下，咱们来剖析 Runtime + Compiler 构建进去的 Vue.js，它的入口是 src/platforms/web/entry-runtime-with-compiler.js：
/* @flow */
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 idToTemplate = cached(id => {const el = query(id)
return el && el.innerHTML
})
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(`Do not mount Vue to <html> or <body> - mount to normal elements instead.`)
return this
}
const options = this.$options
// resolve template/el and convert to render function
if (!options.render) {
let template = options.template
if (template) {if (typeof template === 'string') {if (template.charAt(0) === '#') {template = idToTemplate(template)
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(`Template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodeType) {template = template.innerHTML} else {if (process.env.NODE_ENV !== 'production') {warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {template = getOuterHTML(el)
}
if (template) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile')
}
const {render, staticRenderFns} = compileToFunctions(template, {
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {mark('compile end')
measure(`vue ${this._name} compile`, 'compile', 'compile end')
}
}
}
return mount.call(this, el, hydrating)
}
/**
* Get outerHTML of elements, taking care
* of SVG elements in IE as well.
*/
function getOuterHTML (el: Element): string {if (el.outerHTML) {return el.outerHTML} else {const container = document.createElement('div')
container.appendChild(el.cloneNode(true))
return container.innerHTML
}
}
Vue.compile = compileToFunctions
export default Vue
那么，当咱们的代码执行 import Vue from 'vue' 的时候，就是从这个入口执行代码来初始化 Vue，那么 Vue 到底是什么，它是怎么初始化的，咱们来一探到底。
Vue 的入口
在这个入口 JS 的上方咱们能够找到 Vue 的起源：import Vue from './runtime/index'，咱们先来看一下这块儿的实现，它定义在 src/platforms/web/runtime/index.js 中：
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)
}
// ...
export default Vue
这里要害的代码是 import Vue from 'core/index'，之后的逻辑都是对 Vue 这个对象做一些扩大，能够先不必看，咱们来看一下真正初始化 Vue 的中央，在 src/core/index.js 中：
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 这里有 2 处要害的代码，import Vue from './instance/index' 和 initGlobalAPI(Vue)，初始化全局 Vue API（咱们稍后介绍），咱们先来看第一局部，在 src/core/instance/index.js 中：
Vue 的定义
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 的庐山真面目，它实际上就是一个用 Function 实现的类，咱们只能通过 new Vue 去实例化它。
有些同学看到这不禁想问，为何 Vue 不必 ES6 的 Class 去实现呢？咱们往后看这里有很多 xxxMixin 的函数调用，并把 Vue 当参数传入，它们的性能都是给 Vue 的 prototype 上扩大一些办法（这里具体的细节会在之后的文章介绍，这里不开展），Vue 按性能把这些扩大扩散到多个模块中去实现，而不是在一个模块里实现所有，这种形式是用 Class 难以实现的。这么做的益处是十分不便代码的保护和治理，这种编程技巧也十分值得咱们去学习。
initGlobalAPI
Vue.js 在整个初始化过程中，除了给它的原型 prototype 上扩大办法，还会给 Vue 这个对象自身扩大全局的静态方法，它的定义在 src/core/global-api/index.js 中：
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
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 上扩大的一些全局办法的定义，Vue 官网中对于全局 API 都能够在这里找到，这里不会介绍细节，会在之后的章节咱们具体介绍到某个 API 的时候会具体介绍。有一点要留神的是，Vue.util 裸露的办法最好不要依赖，因为它可能常常会发生变化，是不稳固的。
总结
那么至此，Vue 的初始化过程根本介绍结束。这一节的目标是让同学们对 Vue 是什么有一个直观的意识，它实质上就是一个用 Function 实现的 Class，而后它的原型 prototype 以及它自身都扩大了一系列的办法和属性，那么 Vue 能做什么，它是怎么做的，咱们会在前面的章节一层层帮大家揭开 Vue 的神秘面纱。
正文完
