What happened to New Vue

Let’s take a simple code example to see what Vue does

<div id="app">{{ message }}</div>
var app = new Vue({
    el: '#app'.data: {
    message: 'Hello Vue! '}})Copy the code

The first thing we know is that the page renders a Hello Vue!

In Chapter 1 we learned that Vue is a constructor, so new Vue(options) instantiates the Vue object based on the configuration parameters, calling this._init. App points to an instantiated Vue object

// src/core/instance/init.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')}// Initialize the Vue object
  this._init(options)
}

// src/core/instance/init.js
Vue.prototype._init = function (options? :Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if(process.env.NODE_ENV ! = ='production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    vm._isVue = true
    // merge options Merge configurations
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if(process.env.NODE_ENV ! = ='production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm) // Initialize the life cycle
    initEvents(vm)    // Initialize the event center
    initRender(vm)    // Initialize render
    callHook(vm, 'beforeCreate') // Call the beforeCreate
    initInjections(vm) // resolve injection before data/props
    initState(vm)  // Initialize data, props, coputed, watcher
    initProvide(vm) // resolve provide after data/props Initialize provide
    callHook(vm, 'created') // Call the check box 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, endTag)
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }

Copy the code

Vue initialization changes several things, including merging configurations, initializing the declaration cycle, initializing the event center, initializing the render, initializing data, props, Coputed, watcher, and so on.

At the end of initialization, we detect that if there is an EL attribute, we call the vm.$mount method to mount the VM. The goal of mount is to render the template into the final DOM, so let’s analyze the mount process of Vue.