Wechat official account: [Dafront-end Post] follow Dafront-end Post. Questions or suggestions, welcome to leave messages on the public account.

This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

In the previous chapter, we briefly introduced the Vue execution process in VUE2 Source Parsing (1). In this chapter, we create an example to see the pre-mount process. In our previous coding environment, we create a new my-test directory under examples, and then create an init.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> /.. /dist/vue.js"></script> </head> <body> <div id="app" @click="add">{{counter}}</div> </body> <script> const app = new Vue({ el: '#app', data: function() { return { counter: 1 } }, methods: { add() { this.counter++ } } }).$mount() </script> </html>Copy the code

In this example, we look at the initialization process of Vue. First, we have a new instance of Vue. Then we can locate the instance directory in the source code index.js, and we can find the constructor of Vue

src\core\instance\index.js

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

The constructor fires a _init method, which is a little hard to find, but you can also see that there are multiple Mixin methods under the constructor, all passing Vue as an argument.

Let’s start by looking at what a few other mixins do besides initMixin

  • StateMixin: sets properties $data, $props, $set, and $del for the Vue prototype object
  • EventsMixin: set the attributes $on, $once, $off, $emit for the Vue prototype object
  • LifecycleMixin: Set properties _update, $forceUpdate, $Destroy, and $Emit for the Vue prototype object
  • RenderMixin: Sets the properties $nextTick, _render to the Vue prototype object

It can be seen that these mixins are used to enrich the functions of Vue. Most of the methods or attributes on these prototype objects are used in our daily work. We will not post code details here, but students can go through this part of code one by one.

Then let’s focus on what initMixin does. In initMixin you can see that Vue’s prototype object is set to _init, which is triggered by the constructor.

src\core\instance\init.js

Vue.prototype._init = function (options? : Object) {// merge options if (options && options._isComponent) {... initInternalComponent(vm, options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), The options | | {}, vm)} / * Istanbul ignore the else * / / / the second step is to set up agency if (process. The env. NODE_ENV! == 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm // And then there's a series of things to do with options initLifecycle(VM) initEvents(VM) initRender(VM) callHook(VM, 'beforeCreate') initInjections(vm) // resolve injections before data/props initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') /* istanbul ignore if */ if (process.env.NODE_ENV ! == 'production' && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, If (vm.$options. El) {vm.$options. El)}}Copy the code

Merge options

To handle the option merge of the component instance with the parent component instance or the root instance, as well as the options we pass in using mixins, we need to merge the options first and then assign the merged options to the instance’s $options property

Set the agent

Don’t think of this step as reactive processing, because a lot of students think of Proxy as reactive processing. So what’s the proxy for here, let’s go back to the init.html example

. add() { this.counter++ } ...Copy the code

We all know that this refers to the Vue instance in the add method, so why do we get the counter set in the data property directly from this. Counter? This is what the proxy does here.

Treatment options

  • InitLifecycle (VM) : defines VM: $parent, $root, $children, $refs, etc
  • InitEvents (VM) : initializes events: _events, _hasHookEvent, if an event passed in by the parent component is updated to this component
  • InitRender (VM) : Initializes the attributes associated with render and responds to the $attrs and $Listeners attributes
  • CallHook (VM, ‘beforeCreate’) : Triggers the beforeCreate hook function
  • InitInjections (VM) : handle the attribute of Injections
  • InitState (VM) : processes props, methods, data, computed, and watch in sequence
  • InitProvide (VM) : Handles the properties that Provide provides to descendant components
  • CallHook (VM, ‘created’) : Fires the created hook function

Triggers the $mount method

Now it’s time to start compiling and mounting, which we’ll cover in more detail in the next chapter

~ ~

Thanks for watching! To be continued……

Pay attention to the following [big front post]
Let’s learn and make progress together

【 Share, like, watch 】 three consecutive, let more people join us ~~