上篇说到,除了各种依赖之外(因为这些import语句在打包之后当然是找不到的),我们将断点打在了第一条语句initGlobalAPI(Vue)
上,。
实际上我们再看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)
会发现第一条执行的是什么,得去看 ./instance/index
传入的Vue是什么
// 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)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue
在Vue方法里,可以了解到,如果创建了一个Vue实例,则会调用this._init(options)
。
而我们在vue项目里一般创建实例是这样的
new Vue({
el: '#app',
router,
template: ' ',
components: { App }
});
对比function Vue (options)
是不是具体了许多
整个instance/index.js
里干的事情就是给各种Vue的实例方法属性赋值
initGlobalAPI
再看initGlobalAPI
// 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
// 2.6 explicit observable API
Vue.observable = (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) // 提供内置组件 keep-alive
initUse(Vue)
initMixin(Vue)
initExtend(Vue)
initAssetRegisters(Vue)
}
在这个方法里,可以看到Vue的全局配置config,Vue的全局API extend、nextTick等, Vue.options 里components、filters等被初始化赋值。
总结下来,在core/index.js里做的事情就是为这个文档(https://cn.vuejs.org/v2/api/)里出现的各种方法、属性等赋值