Vue.js is a very good front-end development framework, not me, everyone knows that.

First of all, I now ability, independent reading the source code or have a lot of pressure, but luckily the vue write very norms, by the method name can be a nodding acquaintance, basic principle of inside don’t know where many find information, this article is not standard is not the right place to welcome correct, students are willing to accept your predecessors put forward valuable Suggestions and guidance.

Vue version is V2.5.13, and flow is used as a type management tool. The content related to flow is selectively ignored, and the type system is not considered, but the realization principle is only considered, so I write this article.

This article covers several core areas of VUE: VUE instantiation, virtual DOM, template compilation process, and data binding.


I. VUE’s life cycle


Vue instantiation

Study the vue instantiation is _init method, this method is defined in SRC/core/instance/init. Js initMixin, the handling of vue instance that vm is inside. This includes some column processing such as proxy configuration in the development environment, as well as the parameters passed to the constructor, focusing on a series of methods

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

Initialize the lifecycle, initialize the event, initialize the render, trigger the execution of the beforeCreate lifecycle method, initialize the data/props data listener, trigger the execution of the Created lifecycle method.

Corresponding to the life cycle example diagram, the created method completes execution and determines whether the mounted EL node is passed in. If so, the component is mounted to the DOM via the $mount function, and the entire Vue constructor completes execution. This is the basic flow of vUE object creation.


3. Template compilation

Mount the $mount function, the implementation of this function depends on the runtime environment, in this only look at the web implementation.

The implementation is just two simple lines,

1. Determine whether the operating environment is browser.

2. Call the tool method to find the DOM node corresponding to EL.

3, mountComponent method to implement mount,

This is where the pre-mount processing comes in.

In the render(JSX) case, the component can be mounted directly,

2. If you use template, extract the AST rendering method from it (note that if you use build tools, it will eventually compile into render(JSX) form for us, so don’t worry about performance). The AST is an abstract syntax tree, which is an executable, compilable mapping of the real DOM structure. The ability to compile each node part into a VNode to form a VNode object with a corresponding hierarchy.

With the render method in hand, the next step is to update the DOM, not directly, but via vNode, which brings up a very important concept.


4. Virtual DOM

Virtual DOM technology is a very popular thing. Modern front-end development frameworks vUE and React are based on virtual DOM.

Virtual DOM technology addresses an important problem: the overhead of DOM manipulation by browsers.

1. Js itself is fast,

2, and THE JS object can describe the tree structure like DOM very accurately,

Based on these two premises, people have developed a way of saying,

By using JS to describe a fake DOM structure, every time the data changes, analyze the structural differences before and after the data changes in the fake DOM, find out the smallest difference and only update the smallest change content in the real DOM, so as to greatly reduce the performance overhead brought by DOM operation.

The above fake DOM structure is the virtual DOM, and the comparison algorithm is called the DIff algorithm, which is the key to realize the virtual DOM technology.

1. During vUE initialization, JS objects are used to describe the structure of DOM tree.

2. Use this description tree to build the real DOM and actually display it on the page.

3. Once the data state changes, a new JS DOM tree needs to be rebuilt.

4. Compare the difference between the two trees and find out the minimum update content.

5. And update the minimal difference content to the real DOM.

With the virtual DOM, the next question is when the update will be triggered, and the most distinctive feature of VUE is the data response system and its implementation.


5. Data binding

You Yuxi, the author of Vue. Js, mentioned in his answer on Zhihu that the process of creating vue was initially trying to implement something similar to Angular1, but found it very inelegant for data processing. A creative attempt to implement data binding using Object.defineProperty in ES5 resulted in the original VUE. The responsive approach to data processing in VUE is a valuable thing.

In fact, there is a specific introduction on the official website of VUE. Here is an official picture:



Basic principles of response implementation:

1. Vue iterates through all the properties of the object in this data.

DefineProperty = object.defineProperty = object.defineProperty = object.defineProperty

And every component instance has a Watcher object,

4. It records properties as dependencies during component rendering

5. When setters for dependencies are called later, Watcher is told to recalculate, causing its associated components to be updated.

Why can’t Vue run under IE8?

Object. DefineProperty cannot be used because IE8 does not support ES5, and Object. DefineProperty cannot be shim, so VUE does not support IE8 and below and ES5 browsers.