20190214 questions

What happened in new Vue()?

First of all, from the perspective of syntax, the new keyword represents the instantiation of an object in js language, while Vue is actually a class. Let's take a look at the source code

Source address https://github.com/vuejs/vue/...

// From the source code, we can see that the vue class is very clean. It only executes a "init private function" and can only be initialized through the new keyword
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)
}

Then we trace it to the ﹣ init function

Source address https://github.com/vuejs/vue/...

export function initMixin (Vue: Class<Component>) {
  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
    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)
    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, endTag)
    }

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

From the above code, we can see that "init" has done several things clearly, such as merging related configurations, initializing life cycle, initializing event center, initializing rendering, initializing data, props, computed, watcher, etc

Digression

Vue initialization logic is very clear. It is worth learning from the idea that different functions are divided into some separate functions for execution

About JS daily question

JS daily question can be regarded as a voice answering community
Use fragment time to complete the test questions in 60 seconds every day
The group leader pushes the reference answer of the day at 0 o'clock the next day

• Note: it is not only limited to completing the task of the day, but also to find out and fill in the gaps and learn the excellent ideas of other students in the group

Click to join the question