What did New Vue do?

    import Vue from 'vue'
    new Vue({
        render: h= > h(App)
    }).$mount('#app')
Copy the code
  • Find the source code for Vue,src/core/instance/index.js
    function Vue (options) {...this._init(options)
    }
Copy the code
  • So I called one like this_initMethod ah, although I don’t know what he is, then study it, just go through the general process, otherwise it will get deeper and deeper.

Open the SRC/core/init. Js

    Vue.prototype._init = function (options) {
        const vm = this
        if (options && options._isComponent) {
            initInternalComponent(vm, options)
        } else {
            vm.$options = mergeOptions(
                resolveConstructorOptions(vm.constructor),
                options || {},
                vm
            )
        }
        initLifycycle(vm)
        initEvents(vm)
        initRender(vm)
        callHook(vm, 'beforeCreate')
        initInjections(vm)
        initState(vm)
        initProvide(vm)
        callHook(vm, 'created')... vm.$mount(vm.$options.el) }Copy the code

Define vm variables to store Vue instances. Check options for _isComponent properties. If initInternalComponent exists, I don’t care what this function does. Moving on, there is a question: does isComponent mean that it is a component instance? The answer is yes. Else is the root instance operation. $options = $options = $options = $options = $options = $options = $options = $options; We will analyze mergeOptions later, and the same sentence remains: look at the main process to know what you want to see. After reading the main process, you can look at other ones with purpose.

So once you merge the properties, there’s a bunch of initializations, all kinds of inits, and there’s two lifecycle hooks in the middle, which we can probably guess from the name of the init, Initialize the life cycle, initialize the event, initialize render, beforeCreate, initialize Inject, initialize State (props, computed, data, methods, watch), initialize provide, create. This gives us the general idea that the life cycle breforeCreate initialized these things before, and created initialized these things before, so we can call properties in Data in Created, methods in methods, properties in computed, and so on.

Finally, call a $mount to finish.

conclusion

What new Vue() does

  • Merge the options
  • Initialize the life cycle, event, Render, beforeCreate, Inject, Props, Methods, Data, computed, Watch, provide, and created.
  • Call $mount
doubt
  • mergeOptions
  • What is the sequence of initialization procedures?
  • What did $mount do?