Author: @tiffanysbear? New Vue(

Before we look at what New Vue does, let’s take a look at the basics of Vue source code. If you already have a basic understanding of source directory design and so on, you can skip this section.

Source directory design

Vue.js source code is in the SRC directory, the directory structure is as follows.

SRC ├ ─ ─ # compiler to compile related ├ ─ ─ the core core code # ├ ─ ─ platforms # different platforms support ├ ─ ─ server # server rendering ├ ─ ─ SFC #. Vue file parsing ├ ─ ─ Shared # share codeCopy the code

compiler

The Compiler directory contains all compile-related code for vue.js. It includes parsing templates into AST syntax trees, AST syntax tree optimization, code generation, and more.

Compilation can be done at build time (with plugins such as Webpack, vue-Loader, etc.); It can also be done at run time, using vue.js with build functionality. Compilation is a performance-intensive effort, so the former — offline compilation — is preferred.

core

The core directory contains the core code of vue. js, including built-in components, global API encapsulation, Vue instantiation, Obsever, Virtual DOM, utility function Util and so on.

platform

Vue. Js is a cross-platform MVVM framework that can run on the Web or native client with WEEX. Platform is an entry point to vue.js, and two directories represent the two main entry points, packaged into vue.js running on the Web and weex.

server

Vue. Js 2.0 supports server-side rendering. All server-side rendering logic is in this directory. Note: this code is node.js running on the server side, not to be confused with vue.js running on the browser side.

The main job of server-side rendering is to render the components as HTML strings on the server side, send them directly to the browser, and finally “blend” the static tags into a fully interactive application on the client side.

sfc

We usually develop vue.js by building with Webpack, and then writing components from a.vue single file.

The code logic in this directory parses the.vue file contents into a JavaScript object.

shared

Vue.js defines utility methods that are shared between vue.js on the browser side and vue.js on the server side.

Next, we will look for the entry file of Vue. Our subsequent analysis is based on the environment where platform is web. It can be seen from the packaging configuration of package.json and config. The entry file that runs in a Web environment (Runtime only (CommonJS)) is in web/entry-runtime.js.

Vue entry file

Vue entrance Vue file directory/SRC/core/instance/index. Js

// vue/src/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

The ES5 Class is not an advantage of the ES6 Class because:

1. Use Mixin to pass into Vue and add methods to Vue’s prototype. Class is difficult to achieve this method 2, this way the code module is reasonably divided, the extension is scattered to multiple modules to achieve, so that the code file is not too large, easy to maintain and manage. This programming technique can later be used in code development implementations.

Prototype methods added through Mixin:

// vue/src/core/instance/index.js
initMixin(Vue) // _init
stateMixin(Vue) // $set,$delete,$watch
eventsMixin(Vue) // $on,$once,$off,$emit/ / _update lifecycleMixin (Vue),$forceUpdate,$destroy/ /, renderMixin (Vue)$nextTick, and _renderCopy the code

initGlobalAPI

In vue/ SRC /core/index.js, initGlobalAPI(vue) is called to add static methods to vue,

The files in the path vue/ SRC /core/global-api/ are static methods added to vue

Such as:

Vue.use / / use the plugin
Vue.extend
Vue.mixin 
Vue.component 
Vue.directive 
Vue.filter

Copy the code

With this basic understanding and step by step tracking search, we find the location of the new Vue step by step. Next, let’s take a look at what the new Vue does.

What does New Vue do

From the entry file, initialized with the new keyword, called

// src/core/instance/index.js

this._init(options)

Copy the code

InitMixin (Vue), which calls _init, the prototype method added for Vue

// src/core/instance/init.js

Vue.prototype._init = function (options? : Object) {
    const vm: Component = this. .// 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')... . if (vm.$options.el) { vm.$mount(vm.$options.el) } }Copy the code

So, from the above function, what new Vue does unfolds like a flow chart, respectively

  • Merge configuration
  • Initialize the life cycle
  • Initialize the event center
  • Initialize render
  • callbeforeCreateHook function
  • Init injections and reactivity (this is the phase where the attributes are injected and tied, and are injections$watchReactivity, but$elIt’s still not generated, so DOM is not generated.
  • Initialize state (initialize data, props, computed, watcher)
  • Call the created hook function.

At the end of initialization, if the el attribute is detected, the VM is mounted by calling the vm.$mount method with the goal of rendering the template into the final DOM.

The mainline logic of Vue code initialization is very clear, making logic and flow very clear, which is a programming approach worth learning.

The last

The current section only covers the process and meaning of new Vue in a rough way. The following documents will continue to study and analyze the source code of Vue, and then analyze in more detail what is done behind each function in the Lifecyle.