【Vue2 源码01】入口处:原型属性与函数属性的挂载

186 阅读1分钟

1. 入口

相对路径为 /src

一般入口:platforms/web/entry-*.js => runtime/index => core/index => core/instance/index

1. 实例文件中各种mixin配置Vue原型,注册实例api

// core/instance/index
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

2. 核心入口 initGlobalAPI(Vue)

注册Vue全局API(静态方法),声明并挂载Vue.configVue.utilVue.options对象

3. 打包入口处挂载工具,注册内置指令、组件,注册实例$mount

// platforms/web/runtime/index
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement

extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

Vue.prototype.__patch__ = inBrowser ? patch : noop

Vue.prototype.$mount = function (el?: string | Element, hydrating?: boolean): Component {
	el = el && inBrowser ? query(el) : undefined
	return mountComponent(this, el, hydrating)
}

2. 实例mixin

1. initMixin

Vue.prototype._init 构造函数

2. stateMixin

  • 注册引用

    Vue.prototype.$data getter => _data

    Vue.prototype.$props getter => _props

  • 注册方法

    Vue.prototype.$set

    Vue.prototype.$delete

    Vue.prototype.$watch

3. eventsMixin

Vue.prototype.$on

Vue.prototype.$once

Vue.prototype.$off

Vue.prototype.$emit

4. lifecycleMixin

Vue.prototype._update

Vue.prototype.$forceUpdate

Vue.prototype.$destroy

5. renderMixin

installRenderHelpers(Vue.prototype)组测渲染工具

Vue.prototype.$nextTick

Vue.prototype._render

3. 注册全局API

1. initGlobalAPI()

Vue.config getter => 预设config文件

Vue.util = { warn, extend, mergeOptions, defineReactive }

Vue.set

Vue.delete

Vue.nextTick

Vue.observable

Vue.options = Object.create(null)

Vue.options.components = Object.create(null)

Vue.options.components.KeepAlive

Vue.options.directive = Object.create(null)

Vue.options.filter = Object.create(null)

Vue.options._base = Vue

2. initUse

Vue.use

3. initMixin

Vue.mixin

4. initExtend

Vue.extend

Vue.cid

5. initAssetRegisters

Vue.component

Vue.directive

Vue.filter