preface

The Vue framework contains a variety of features. To better understand the framework itself, let’s take a look at some of the operations done during Vue initialization

// Merge options, parameter processing
if (options && options._isComponent) {
  // Optimize the instantiation of internal components, and the dynamic merge of internal components is slow and there are no special parts to deal with.
  initInternalComponent(vm, options)
} else {
  // Merge options
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  )
}
Copy the code
// Expose the true this pointer
vm._self = vm
// Initialize the life cycle
initLifecycle(vm)
// Initialize the event listener
initEvents(vm)
// Render the page
initRender(vm)
// Go to the beforeCreate life cycle
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
// Initialization state
initState(vm)
initProvide(vm) // resolve provide after data/props
// Enter the Created life cycle
callHook(vm, 'created')

if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}
Copy the code

Here are the functions of calling methods in order:

initLifecycle

It’s basically doing some initialization of variables

initEvents

Initialize event listening

initRender

It is primarily used to initialize componentsThe scopedSlots property, andListeners properties

callHook(vm, ‘beforeCreate’)

Needless to say, this is calling the beforeCreate lifecycle method

initInjections

Vue2.2.0’s new feature, initialized as an API for HOC higher-order components, includes a provide and inject attribute. The parent component uses provide to inject an object, and the child component can obtain the value injected by the parent component through Inject, regardless of the level. InitInjectctions initializes the Inject attribute

initState

Initialize properties such as data, props, methods, computed, and watch

initProvide

As you can see from the method name, it is used to initialize the provide HOC component property

callHook(vm, ‘created’)

Call the Created lifecycle method

vm.options.el)

The $mount method is called to initialize the DOM node when the EL attribute (the DOM node mounted by the Vue template) is passed in as new Vue.

Blog address gitbook booklet