3. Where did Vue come from

After new Vue(). Vue calls the _init function for initialization. It initializes the lifecycle, events, props, methods, Data, computed, watch, and so on.

Source directory

SRC - compiler / / compile related (template syntax parsing) - core / / core code (hardcore here) - platforms / / cross-platform support (weex/web), Also vue entry file -server // server rendering - SFC //. Vue file parsing -shared // common method for other directories and many many constantsCopy the code

Where did vue come from

Through the section in the previous chapter, vue Runtime + Compiler entry documents for vue 2.6 / SRC/platforms/web/entry – the Runtime – with – the Compiler. Js. So where does vue come from?

/runtime/index import vue./runtime/index import vue

/ / address vue 2.6 / SRC/platforms/web/entry - the runtime - with - compiler. Js. // Import vue from the./runtime/index file and add some prototype methods to it'./runtime/index'
Vue.prototype.$mount = function(...). {} Vue.compile = compileToFunctionsCopy the code

/runtime/index adds config and other attributes to the vue imported from core/index

/ / address vue 2.6 / SRC/platforms/web/runtime/index, js import vue the from'core/index'Vue.config.mustUseProp = mustUseProp Vue.config.isReservedTag = isReservedTag Vue.config.isReservedAttr = isReservedAttr  Vue.config.getTagNamespace = getTagNamespace Vue.config.isUnknownElement = isUnknownElement // install platform runtime  directives & components extend(Vue.options.directives, platformDirectives) extend(Vue.options.components, platformComponents) // install platform patchfunction
Vue.prototype.__patch__ = inBrowser ? patch : noop
...
export default Vue
Copy the code

/instance/index import vue add globalApi and export./instance/index import vue

// address vue-2.6/ SRC /core/index import vue from'./instance/index'
import { initGlobalAPI } from './global-api/index'
initGlobalAPI(Vue)
Vue.version = '__VERSION__'
export default Vue
Copy the code

The./instance/index step defines the vUE and states that the vUE can only be created by the new vue keyword. It also writes various attributes to vUE through mixin functions and still exports vUE after processing

/ / address vue 2.6 / core/instance/index, js import from {initMixin}'./init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '.. /util/index'

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

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

export default Vue
Copy the code

As you can see from the code in the four files above, the original VUE was a simple object. And then what was written into it from the various files turned it into a very powerful object. Split into 4 files to make the code structure very clear. This is something worth learning