Vue静态、实例方法和实例

前文

rollup配置文件找到入口文件,然后溯源,就知道Vue最源头定义

  1. src/platforms/web/entry-runtime-with-compiler.js
  2. src/platforms/web/runtime/index.js
  3. src/core/index.js
  4. 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
    添加原型方法_initVue初始化会被调用
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 {
            ...
        }
    })
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,919评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,567评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,316评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,294评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,318评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,245评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,120评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,964评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,376评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,592评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,764评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,460评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,070评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,697评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,846评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,819评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,665评论 2 354

推荐阅读更多精彩内容