前文
從rollup
配置文件找到入口文件,然后溯源户侥,就知道Vue
最源頭定義
src/platforms/web/entry-runtime-with-compiler.js
src/platforms/web/runtime/index.js
src/core/index.js
src/core/instance/index.js
正文
1. Vue實(shí)例方法(src/core/instance/index.js
)
function Vue (options) {
...
}
// 以下混入一些實(shí)例方法vm.xxx
// 混入_init方法
initMixin(Vue)
// 設(shè)置數(shù)據(jù)代理却邓、混入$watch硕糊、$set、$delete等狀態(tài)數(shù)據(jù)相關(guān)實(shí)例方法
stateMixin(Vue)
// 混入$on、$emit等事件相關(guān)實(shí)例方法
eventsMixin(Vue)
// 混入$destroy简十、$forceUpdated等生命周期相關(guān)實(shí)例方法
lifecycleMixin(Vue)
// 混入_render檬某、$nextTick、_s等一些渲染需要的一些方法
renderMixin(Vue)
-
initMixin
添加原型方法_init
螟蝙,Vue
初始化會(huì)被調(diào)用
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
...
}
}
-
stateMixin
設(shè)置數(shù)據(jù)代理恢恼、混入$watch、$set胶逢、$delete
等狀態(tài)數(shù)據(jù)相關(guān)實(shí)例方法
export function stateMixin (Vue: Class<Component>) {
...
Object.defineProperty(Vue.prototype, '$data', dataDef)
Object.defineProperty(Vue.prototype, '$props', propsDef)
Vue.prototype.$set = set
Vue.prototype.$delete = del
Vue.prototype.$watch = function (): Function {
...
}
}
-
eventsMixin
混入事件相關(guān)實(shí)例方法
export function eventsMixin (Vue: Class<Component>) {
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
...
}
Vue.prototype.$once = function (event: string, fn: Function): Component {
...
}
Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
...
}
Vue.prototype.$emit = function (event: string): Component {
...
}
}
-
lifecycleMixin
混入生命周期相關(guān)方法
export function lifecycleMixin (Vue: Class<Component>) {
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
...
}
Vue.prototype.$forceUpdate = function () {
...
}
Vue.prototype.$destroy = function () {
...
}
}
-
renderMixin
混入渲染相關(guān)方法
export function renderMixin (Vue: Class<Component>) {
installRenderHelpers(Vue.prototype)
Vue.prototype.$nextTick = function (fn: Function) {
...
}
Vue.prototype._render = function (): VNode {
...
}
}
其中installRenderHelpers
是混入一些渲染模板
使用的方法
export function installRenderHelpers (target: any) {
target._o = markOnce
target._n = toNumber
target._s = toString
...
}
2. Vue靜態(tài)方法和屬性(全局API)
// 初始化一些全局API
initGlobalAPI(Vue)
// 當(dāng)前 Vue 實(shí)例是否運(yùn)行于服務(wù)器
Object.defineProperty(Vue.prototype, '$isServer', {
get: isServerRendering
})
// 服務(wù)器端渲染上下文(SSR context)
Object.defineProperty(Vue.prototype, '$ssrContext', {
...
})
// 定義了 FunctionalRenderContext 靜態(tài)屬性
// 之所以在 Vue 構(gòu)造函數(shù)上暴露該屬性厅瞎,是為了在 ssr 中使用它
Object.defineProperty(Vue, 'FunctionalRenderContext', {
value: FunctionalRenderContext
})
// rollup會(huì)替換'__VERSION__'為實(shí)際版本
Vue.version = '__VERSION__'
initGlobalAPI
是定義一些靜態(tài)方法和屬性
export function initGlobalAPI (Vue: GlobalAPI) {
// 設(shè)置全局配置
Object.defineProperty(Vue, 'config', configDef)
Vue.util = {
warn,
extend,
mergeOptions,
defineReactive
}
// 同樣的方法,全局的設(shè)置
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)
})
// 這個(gè)就是用于取構(gòu)造函數(shù)的
Vue.options._base = Vue
// extend KeepAlive到components初坠,因?yàn)檫@貨是內(nèi)置的
extend(Vue.options.components, builtInComponents)
// 掛載use相關(guān)的方法
initUse(Vue)
// 掛載mixin靜態(tài)方法
initMixin(Vue)
// 掛載extend靜態(tài)方法
initExtend(Vue)
// 掛載資源注冊(cè)靜態(tài)方法(Vue.component和簸、Vue.directive、Vue.filter)
initAssetRegisters(Vue)
}
-
initUse
定義Vue.use
全局方法
export function initUse(Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
...
}
}
-
initMixin
定義Vue.mixin
全局方法
export function initMixin(Vue: GlobalAPI) {
Vue.mixin = function (mixin: Object) {
...
}
}
-
initExtend
定義Vue.extend
全局方法
export function initExtend(Vue: GlobalAPI) {
// 每個(gè)實(shí)例構(gòu)造函數(shù)都有唯一的cid碟刺,用于性能優(yōu)化
Vue.cid = 0
let cid = 1
Vue.extend = function (extendOptions: Object): Function {
...
}
}
-
initAssetRegisters
定義Vue.component锁保、Vue.directive、Vue.filter
三個(gè)資源相關(guān)
全局方法
import { ASSET_TYPES } from 'shared/constants'
export function initAssetRegisters(Vue: GlobalAPI) {
ASSET_TYPES.forEach(type => {
Vue[type] = function (id: string, definition: Function | Object): Function | Object | void {
...
}
})
}