The Chinese doctrine of the mean, what about the Chinese man-made framework?

Hi everyone, this is Kasong.

It is said that the Chinese pay attention to the doctrine of the golden mean, but are Chinese man-made frames emphasized?

This article will explain from the principle level Vue maintains a moderate balance between runtime and compile time.

UI = fn(state)

The working principle of almost all front-end frameworks can be summarized by the following formula:

UI = fn(state)

UI (view) can be calculated from state (state) through fn (frame).

However, in terms of specific principles, there are huge differences between the frameworks.

They can be divided into three categories according to the update granularity

• Tree-level update
• Component level update
• Node level update

There is no difference in update granularity, just corresponding to different implementations

Next, we briefly understand the implementation principles of different granular update methods.

Suppose there is the following component tree, where Cpn is a custom component, and the internal structure is ul>li*2 :

We want to Cpn a in li updated to yellow:

Tree-level update

tree-level update of the framework will generate a complete virtual DOM tree , which is compared with the previous virtual DOM tree during the generation process:

After finding the changed node, perform the operation DOM

tree-level update framework features:

• Rely on virtual DOM
• Don't care about the node that triggers the update (because he will be found through the full tree comparison of the virtual DOM

The most famous framework that uses this update method is React .

Component level update

In the above example, if it is update the frame at the component level.

The component that triggers the update node will be found, and the virtual DOM tree (instead of the full-tree virtual DOM tree ) will be generated, and the generation process will be compared with the corresponding node virtual DOM tree

After finding the changed node, perform the operation DOM

component-level update framework features:

• Rely on virtual DOM
• Care about the node that triggers the update ( virtual DOM will affect the component where the node is located)

The most famous framework that uses this update method is Vue .

Node level update

If it is the node-level update of the be directly generated according to the DOM change state change during compilation, and the corresponding method will be directly called after the state change.

The above example will associate the color state with the changeColor method at compile time:

function changeColor(newColor) {
  li.style.color = newColor;
}

After changing the color , directly call the changeColor method to update li corresponding to DOM .

The characteristics of the node-level update

• Do not rely on virtual DOM , rely on pre-compilation (establish the link between the DOM
• Care about the node that triggers the update (one-to-one correspondence between node status and update method)

The most famous framework that uses this update method is Svelte .

Moderate Vue3

Vue as component-level update , and the update granularity is between tree-level and node-level . Is it center left or center right?

Vue3 says:

I want to jump horizontally repeatedly, I want to both sides

Vue3 contains three tree structures:

描述视图的树 -> 虚拟DOM树 -> 真实DOM树

Which description view of tree official recommended template syntax , but can also be used JSX .

Either way, it will eventually be transformed into a virtual DOM tree .

When JSX time, Vue3 have React flexibility runtime, this time Vue3 can be seen as enhanced version + Mobx React

When using template syntax , Vue3 introduces pre-compiled technology. At this point Vue3 can be refined into four steps:

描述视图的树 -> VNode树 -> Block数组 -> 真实DOM树

The VNode tree is the conventional virtual DOM tree , and the Block array is VNode tree is an array composed of VNode that depends on the state and changes.

For example, for the following template syntax:

<template>
  <section>
    <div>i am</div>
    <p>{{name}}</p>
  </section>
</template>

section and div do not contain status and will not change, so they will be converted to VNode , but they do not correspond to Block .

p contains the state name , which will be transformed into VNode and Block .

When the template where the trigger assembly name state changes, we need to turn created before section , div , p of VNode and compared.

With the pre-compilation technology, only need to traverse the Block array for comparison.

Using the above example, only one li node needs to be compared:

In this case, although the component-level update virtual DOM is used, it is very close to the node-level update framework.

to sum up

This article introduces three different types of frameworks according to update granularity, and the flexible changes between flexibility and update granularity of Vue3 when choosing JSX and template syntax.

It can be said that it is in line with the golden mean.

Some people may ask, most users Vue3 template syntax , why not just abandon the virtual DOM and use pre-compilation technology to realize the real node level update ?

On the one hand, the virtual DOM makes the frame separate from the specific view layer, which is more convenient for cross-end rendering.

On the other hand, the Vue2 community ecology has accumulated a large number of libraries virtual DOM

If it were you, what choice would you make in this situation?