Start at the Vue constructor entry

We know that Vue tends to work from new, which means that Vue must be a constructor, so its prototype chain must expose many methods or properties. Given the rules of Vue, take a bold guess before looking at the source code. The following or similar forms should be numerous:

Vue.prototype.$method = function(){
	/ / ignore
}
Vue.prototype._method = function(){
	/ / ignore
}
Copy the code

Just how it is done, or what is the mystery of Vue, and whether it will be thigh slapping after watching it, we will take this question to find out. From the entry location: core/instance/index.js

import { initMixin } from './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

We see the introduction of five Mixin methods at the beginning of the page, executed with the only argument being the Vue constructor itself. It mainly adds different methods to the Vue prototype chain in different stages. This article will briefly introduce which methods or attributes are exposed by these five methods, which will be introduced in detail later. Let’s look at the constructor itself:

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)
}
Copy the code

Constructors do two things:

• Detect calls in non-production environmentsVueWhether it isnewIf it doesn’t, it prints a warning;
• Will youoptionsConfigure incoming, executeVueInternal methods on the prototype chain_init.

initMixin

What are the main things I did:

• Merge configuration
• Initialize component instance relationships and internal properties: For example, the parent, root, parent, root, children, children, refs, and internal properties of the current component.
• Initializes custom events
• Initialize component slot information
• Call the lifecycle functionbeforeCreate
• Initialize the Inject configuration item of a component
• Initialization status. Separate initializationprops,methods,data,computed,watch(Highlight!!)
• Initialize the component’s provide configuration items
• Call the lifecycle functioncreate
• If it is the root component (custom configuration has itelOption) is called$mountAutomatically mount

stateMixin

The Vue prototype chain initializes $data, $props, $set, $delete, and $watch methods

eventsMixin

The $ON, $once, $off, $emit methods are initialized on the Vue prototype chain

lifecycleMixin

Initialize the _update, $forceUpdate, and $destroy methods on the Vue prototype chain

renderMixin

Initialize the $nextTick, _render methods on the Vue prototype chain

conclusion

Vue encapsulates the main logic respectively in different Mixin methods to initialize, write very clear, more convenient positioning analysis, is worth learning from us. This article only combs the structure of what Vue initialization mainly does, and follows the backbone, then dissects in detail.