A global overview

First of all, the main purpose of this article is to give you a global understanding of the internal workings of VUE. After that, their respective principles will be introduced in detail.

OK, without further ado, let’s briefly introduce each module

Initialize and mount

After executing new Vue(), Vue performs a method called init(), where initialization includes life cycles, events, props, data, methods, computed, watch, and an observer for all data. Among them, data observer is the key for us, and also the key for vUE to realize responsiveness. This is mainly done by setting getters and setters to Object.defineProperty to implement dependency collection and data responsiveness, as described later in this section.

After initialization, $mount is executed to mount the component, or if it is compiled at runtime (with template and no render function), it is compiled to generate the render function.

Compile the compile ()

Compile stage is divided into parse, optimize, and Genarate stages, and finally generate render function

  • Parse: What parse does is generate something called an abstract syntax tree (AST, simply a JSON object) by matching the entire template with a re.
  • Optimize: primarily used to mark static nodes. Static nodes are simply the parts of the page that are written dead (without reference to vUE). The purpose of marking static nodes is that when updating the view, there will be a patch process to compare the old and new virtual DOM. If static nodes are used, they can be skipped directly. This is a performance optimization in VUE.
  • Genarate: Basically convert AST to render function string.

responsive

Then comes vue’s top priority

As we know from the previous section, when init(), getters and setters are set through the object.defineProperty () method, which causes the getter to be executed when data is read and the setter to be executed when data is modified.

As we can see from the above figure, vue will point to the getter for dependency collection of data when performing the render function. The so-called dependency collection is to allocate a Dep for each data and then rely on the Watcher of these data (usually a VUE component corresponds to a Watcher). Add to the corresponding Dep.

When data is modified, setter will be executed to respond to the data. The process is to execute notify method through Dep and notify wacher of corresponding data to perform update method to update the view.

The corresponding diagram of Data, Dep and Watcher is as follows

In layman’s terms, the entire VUE responsive mechanism is like a subscription log, in which each page represents a Dep object that holds all the Watchers that a piece of data depends on. When the data changes, the Dep notifies each subscriber of that data to perform an update.

Just as each page of a subscription book records all subscribers of a book, when the book’s content is updated, all subscribers are notified to perform some action

Virtual DOM

We know that when we execute the compiled render function, we generate something called the virtual DOM. The virtual DOM is simply a tree based on javascript objects (vNodes). This tree is actually a mapping of the real DOM. Finally, you can generate the real DOM through a series of operations.

A simple virtual DOM is shown below

{
    tag: 'div'./* This is a div tag */
    children: [                 /* The child node of the label */
        {
            tag: 'a'./* Indicates that this is a tag */
            text: 'I'm tag A'    /* Label content */}}]Copy the code

It maps to the real DOM and looks like this

<div>
    <a>I'm tag A</a>
</div>
Copy the code

Of course, this is only the simplest example, but there are other attributes in the virtual dom such as isStatic, which indicates whether a node isStatic, and so on.

The diff algorithm is the update of the view

A new vDom is formed after each update(or first render) we perform. Of course, the easiest way to do a view update is to simply generate a real DOM tree and replace the old tree with a new one. But doing so is a huge waste.

Vue mainly uses patch method to optimize this aspect, which is also known as diFF algorithm. The patch method takes the old and new virtual DOM as arguments. They are then compared to find out the differences and then replaced with the real DOM, which dramatically improves performance. Of course, specific patch methods will be introduced in subsequent articles.

About nextTick

Through the above understanding, we know the entire internal operation mechanism of VUE. So, there’s a question here, we can’t just update one data at a time or if something keeps updating, do we generate a DOM every time we update it?

The answer, of course, is no. By default, vue. js will push the corresponding Watcher object into a queue every time setter method of certain data is triggered. It will take out these Watcher objects and perform the corresponding patch operation in the next tick.

So what’s the next tick? Listen to the breakdown.