What are the main aspects of vue3's efficiency improvement?

vue3.0 are still very good. Compared with vue2.0 it is indeed a step up. It is said that the rendering efficiency on the client side is increased by 1.3~2 times compared with vue2, and the SSR rendering efficiency is increased by 2 ~3 times compared with vue2. You may also be asked during the interview.

📌 Static promotion

There is a compiler in vue. In the package.json @vue/compiler-sfc , there is a 060c1641cea62b, which is called vue-template-compiler . These two are the compilers. It will compile our template into render function. In vue3, the compiler is very smart. During the compilation process, it can find out which nodes are static nodes and what are static nodes?

A static node is an element node, and there is no dynamic content in this node, that is, it is not bound to any dynamic attributes. This is called a static node, such as:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

img in the above code is a static node, it is not bound to any dynamic content

However, the vue3 compiler will find the static node and then upgrade it, but in vue2 it does not care whether it is a static node or a dynamic node. The operation is as fierce as a tiger, the following comparison:

//vue2 的静态节点
render(){
    //创建一个虚拟节点h1，没有任何属性，只有内容为"法医"，编译后 <h1>法医</h1>
    createVNode("h1",null,"法医");
    //....其他代码
}

//vue3 的静态节点
const hoisted = createVNode("h1",null,"法医");
function render(){
    //直接使用 hoisted就可以了
}

In vue3, which feel that since this is a static node, it certainly will not change, can not be said this time h1 element content is forensic next become h2 element content is anything else, so that vue3 think Since it is a static node, there is no need to create it in the render function, because once the data changes, the render function will run repeatedly, and then the static node will be recreated, so in order to improve efficiency, in vue3, it will put the static node Promote to the outside of the render function. In this way, this static node will always be created only once, and then it will be used directly in the render function.

example:

Run a newly created vue3 project, you can clearly see in the console that the static node has been promoted to the outside. This is the promotion of static nodes.

In fact, not only the static node will be improved, but also the static properties will be improved, ok, let’s take a look:

example:

APP.vue component in the newly created project of vue3. Add a h1 element node. Note that h1 is not a static node, it is dynamic, because the content is dynamic, only the attributes are static

//APP.vue代码
<template>
  <h1 class="active">{{name}}</h1>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="解决bug的法医" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
    return{
      name:"bobo"
    }
  },
  components: {
    HelloWorld
  }
}
</script>

as follows:

🍒 Pre-stringification

This is really great. is particularly admired. We can recall that in the usual Vue development process, there are not many dynamic elements in the components, and most of them are static elements.

give a chestnut 🌰:

<div class="menu-bar-container">
    <div class="logo">
      <h1>法医</h1>
    </div>
    <ul class="nav">
      <li><a href="">menu</a></li>
      <li><a href="">menu</a></li>
      <li><a href="">menu</a></li>
      <li><a href="">menu</a></li>
      <li><a href="">menu</a></li>
    </ul>
  </div>
  <div class="user">
    <span>{{user.name}}</span>
  </div>

In this component, except the span element is a dynamic element, the rest are static nodes. Generally speaking, it can be said to be dynamic/static ratio, dynamic content / static content, the smaller the ratio, the more static content, the larger the ratio, the more dynamic content Many, the vue3 compiler will find this very intelligently. When the compiler encounters a large number of continuous static content, it will directly compile it into a normal string node, because it knows that these content will never change. It is a static node.

💉 Note: A large number of continuous static content can be pre-stringified, remember! Currently, there are 20 consecutive static nodes that will be pre-stringified

However, in vue2, every element will become a virtual node, a lot of virtual nodes 😱, these are all static nodes, in vue3 it will find this intelligently

const _hoisted_1 = /*#__PURE__*/
//createStaticVNode 静态节点的意思
_createStaticVNode("<div class=\"menu-bar-container\"><div class=\"logo\"><h1>法医</h1></div><ul class=\"nav\"><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li></ul></div>", 1)

look at the diagram and feel the charm of

🥥 Cache event handler

give a chestnut 🌰:

  <button @click="count++">plus</button>

contrast processing method:

// vue2处理方式
render(ctx){
    return createVNode("button",{
        onclick:function($event){
            ctx.count++;
        }
    })
}

//vue3 处理方式
render(ctx,_cache){
    return createVNode("button",{
        onclick:cache[0] || (cache[0] =>($event) =>(ctx.count++))
    })
}

Create a virtual node button in vue2, there is an event onclick in the attribute, and the content is count++

There is a cache in vue3. It thinks that the event processing here will not change. It does not mean that this rendering is an event function, and it will become something else next time, so vue3 will find this intelligently and will do the cache Processing, it will first look at whether there is this event function in the cache, if it does, it will return it directly, if not, it will directly assign a count++ function to ensure that the event processing function is only generated once, as shown in the following figure:

🌴 Block Tree

Block Tree mainly to improve the efficiency when comparing the differences between the old and new trees. The process of comparing the differences is called diff algorithm, also called patch algorithm.

When vue2 compares the old and new trees, it does not know which nodes are static and which nodes are dynamic, so it can only be compared layer by layer, which wastes most of the time comparing static nodes.

give a chestnut 🌰:

<form>
  <div>
    <label>账号：</label>
    <input v-model="user.loginId" />
  </div>
  <div>
    <label>密码：</label>
    <input v-model="user.loginPwd" />
  </div>
</form>

vue2 comparison:

After a series of comparison found by vue2 ,, only input changed, that is, yellow box section, blue squares are static node has not changed, there is no comparison compare these changes are occurring that have no meaning , Wasted time, wasted life

vue3 contrast:

Vue3 relies on a powerful compiler. The compiler can mark each node, and then record which of the descendant nodes are dynamic nodes in the root node. After recording, it is not the entire tree for comparison during the comparison process, but directly Find the root node, we call it block node, and compare the dynamic node array. This way, all static nodes will be skipped, and no deep traversal of the tree is involved, so the speed will be very fast. When the static content is more, The greater the efficiency increase.

Of course, some friends may ask, when the data is updated, there may be more branches. This will cause the tree to be unstable. Once the tree is unstable, there will be problems. Vue3 will take it all where the tree is unstable. It becomes a block of . The specifics are quite complicated. I haven't studied it yet. It's probably what it means. When I want to understand, I will tell you later 😅

🍅 PatchFlag

Vue3 feels that it is a waste of efficiency when comparing each node. Although it has skipped all the nodes that do not need to be compared, it still needs to see whether the element type, attributes and recursive child nodes of the node have changed. For further optimization when comparing individual nodes, this still needs to rely on the powerful compiler of vue3. When compiling, it will record which node is dynamic content and mark it.

give a chestnut 🌰:

 <div class="active" title="法医">
    {{user.name}}
  </div>

vue3 will be at compile time, it will cook node labeled, marked on the map 1 , it said in div node text is dynamic

give a chestnut 🌰:

<div :class="active" title="法医">
    {{user.name}}
  </div>

This 3 means that the text and class classes in the div node are dynamic

😊 Okay, the above is my sharing, I hope it can be helpful to everyone, welcome everyone to discuss duck in the comment area~

I hope my friends will like it and support it~ 😘, I will be more motivated🤞, good night!