What initialization processes did import vue go through

Vue mentioned in 1-5 JS source code construction process under the web application, the Vue built by Runtime+Compiler is analyzed JS, whose entry is Src / platforms / Web / entry runtime with compiler js

1,entry-runtime-with-compiler.js file parsing

The final export is the vue object

export default Vue

vue is imported through import

import Vue from './runtime/index'

Then mount a $mount method

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
    //.......
)

2,runtime/index.js file parsing

Finally, export vue

export default Vue

vue is introduced from core/index

import Vue from 'core/index'

Define the static global configuration of vue

// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement

Define the patch and $mount methods of the prototype

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

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

3,core/index.js file parsing

Finally, export vue

export default Vue

vue is imported from instance/index

import Vue from './instance/index'

Initialize the API, that is, mount some static properties on vue

import { initGlobalAPI } from './global-api/index'

initGlobalAPI(Vue)

4,instance/index.js file parsing (main)

After finding the definition of vue, it must be instantiated through a new method. This is a way for es5 to implement class

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)
}

Q: why is vue implemented through function?
A: many mixin methods are called. initMixin is actually going to vue An init method is hung on the prototype, and others are similar, that is, each mixin is to mix some methods defined on the prototype into the prototype of vue

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

Q: why not use es6 and es5?
A: es5 can attach many methods to the prototype of vue, and split these methods into different files according to the organization relationship of code modules to facilitate code management. es6 is difficult to implement

Conclusion: vue is actually a function and a class implemented by functions. It can be understood that vue is a class. Many prototype methods are hung on the class, except for the mixed method of mixin, as mentioned above/ Methods will also be hung to the prototype under runtime/index, including the entry - runtime - with - compiler JS will also hang some methods. In addition to the methods on the prototype, there is also a global API. See 5. Global API / index JS file parsing

5,global-api/index.js file parsing (Mount static method)

configDef is defined on the config of vue. The config source is/ Config, which defines the global config of many vues. For details, see the api on the official website of vue

import config from '../config'

Object.defineProperty(Vue, 'config', configDef)

The util method of vue is defined. The official website of this method does not recommend the use of external libraries, because the implementation of internal methods may be unstable

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

It also provides set, delete and nextTick methods. options can actually merge some methods, ASSET_TYPES 6. Shared / constants JS file parsing

import { ASSET_TYPES } from 'shared/constants'


Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick

Vue.options = Object.create(null)
ASSET_TYPES.forEach(type => {
  Vue.options[type + 's'] = Object.creat(null)
})

The base is defined to point to vue. builtInComponents are built-in components. See 7. Components / index JS file parsing, keep alive is extended to components through the extend method

import builtInComponents from '../components/index'

Vue.options._base = Vue
extend(Vue.options.components, builtInComponents)

A global Vue is defined use,Vue.mixin,Vue. The extend program method, in a word, completes the definition of the global method during the initialization process. After the definition, we can use it in the code

import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'

//(mounting prototype method)
initUse(Vue)
initMixin(Vue)
initExtend(Vue)
initAssetRegisters(Vue)

6,shared/constants.js file parsing

ASSET_TYPES defines global component, directive and filter methods

export const SSR_ATTR = 'data-server-rendered'

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

7,components/index.js file parsing

A KeepAlive is exported. KeepAlive is a built-in component,

import KeepAlive from './keep-alive'

export default {
  KeepAlive
}