前文
从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实例方法(src/core/instance/index.js
)
function Vue (options) {
...
}
// 以下混入一些实例方法vm.xxx
// 混入_init方法
initMixin(Vue)
// 设置数据代理、混入$watch、$set、$delete等状态数据相关实例方法
stateMixin(Vue)
// 混入$on、$emit等事件相关实例方法
eventsMixin(Vue)
// 混入$destroy、$forceUpdated等生命周期相关实例方法
lifecycleMixin(Vue)
// 混入_render、$nextTick、_s等一些渲染需要的一些方法
renderMixin(Vue)
-
initMixin
添加原型方法_init
,Vue
初始化会被调用
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
...
}
}
-
stateMixin
设置数据代理、混入$watch、$set、$delete
等状态数据相关实例方法
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
混入事件相关实例方法
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
混入生命周期相关方法
export function lifecycleMixin (Vue: Class<Component>) {
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
...
}
Vue.prototype.$forceUpdate = function () {
...
}
Vue.prototype.$destroy = function () {
...
}
}
-
renderMixin
混入渲染相关方法
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静态方法和属性(全局API)
// 初始化一些全局API
initGlobalAPI(Vue)
// 当前 Vue 实例是否运行于服务器
Object.defineProperty(Vue.prototype, '$isServer', {
get: isServerRendering
})
// 服务器端渲染上下文(SSR context)
Object.defineProperty(Vue.prototype, '$ssrContext', {
...
})
// 定义了 FunctionalRenderContext 静态属性
// 之所以在 Vue 构造函数上暴露该属性,是为了在 ssr 中使用它
Object.defineProperty(Vue, 'FunctionalRenderContext', {
value: FunctionalRenderContext
})
// rollup会替换'__VERSION__'为实际版本
Vue.version = '__VERSION__'
initGlobalAPI
是定义一些静态方法和属性
export function initGlobalAPI (Vue: GlobalAPI) {
// 设置全局配置
Object.defineProperty(Vue, 'config', configDef)
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)
})
// 这个就是用于取构造函数的
Vue.options._base = Vue
// extend KeepAlive到components,因为这货是内置的
extend(Vue.options.components, builtInComponents)
// 挂载use相关的方法
initUse(Vue)
// 挂载mixin静态方法
initMixin(Vue)
// 挂载extend静态方法
initExtend(Vue)
// 挂载资源注册静态方法(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) {
// 每个实例构造函数都有唯一的cid,用于性能优化
Vue.cid = 0
let cid = 1
Vue.extend = function (extendOptions: Object): Function {
...
}
}
-
initAssetRegisters
定义Vue.component、Vue.directive、Vue.filter
三个资源相关
全局方法
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 {
...
}
})
}
网友评论