Why is vue3 fast? In what aspects does the efficiency of vue3 mainly improve? The following article will introduce to you the optimizations made by vue3 compared to vue2. I hope it will be helpful to you!

You Dada introduced vue3 and said that the rendering efficiency of the client is 1.3-2 times higher than vue2, and the SSR rendering efficiency is 2-3 times higher than vue2.

Improvement of static nodes

What is a static node?

The so-called static node is written in vuetemplateThetagin the template and the tag does not use thev-bindbinding attribute, is considered to be astatic node# invue3##. (Learning video sharing:vuejs tutorial)

vue3will usestatic nodein therenderfunction The variable is saved, so the static node is only created once.

// vue2 的静态节点 render(){ createVNode("h1", null , "Hello World") } // vue3 的静态节点 const h1 = createVNode("h1", null , "Hello World") render(){ // 直接使用即可 }

To prove this, create a

vue3project locally and look at the network request

Static properties will also be improved

containerwill also use variables to save

Pre-stringification

In actual development, # A large part of ##template

is actually static nodes

<template > <div class="container"> <div class="logo"> <h1>logo</h1> </div> <ul class="nav"> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> </ul> <div class="user"> {{ user.name }} </div> </div> </template> <script> export default { data() { return { user: { name: &#39;张三&#39; } } }, } </script>

vue3

The compiler will directly convertwhen encountering a large number of continuous static nodesIt is compiled into an ordinary character creation node

.logo .nav

The entire div is a static node. If it is processed according tovue2, it will be created recursivelyIn

vue3

, it is directly converted into a string, and then when creating the realdom, it is assigned to theinnerHTMLattribute, which reduces theRecursive creation time in vue2

#The performance improvement of pre-stringification is not close to the improvement in the first creation, when re-rendering in the render function The improvement reduces the comparison time of a large number of virtual nodes (very scary)

Cache event processing function

handleClick

event, comparevue2andvue3

// vue2 render(ctx){ return createVNode("button",{ onclick: function ($event) { console.log('点击了') } }) } // vue3 export function render(_ctx, _cache, $props, $setup, $data, $options) { return (_openBlock(), _createBlock("button", { onClick: _cache[1] || (_cache[1] = (...args)=>($options.handleClick && $options.handleClick(...args))) }, "点一下")) }

_cache[1] || (_cache[1] = (...args)=>($options.handleClick && $options .handleClick(...args)))

This code is the cache of the event functionBlock Tree

vue3

When comparing the virtual node tree Optimization has also been done

vue2

When comparing the old and new node trees, we do not know which nodes are static and which nodes are dynamic, so we can only compare layer by layer. As a result, a lot of time was wasted on static node comparison

vue3

How to compare, in fact, when creating a node, there is a mark recording the type of the node

-1

here actually marks the type of the node, so when inBlock Tree, you can directly use this mark to Skip the comparison of static nodes to reduce comparison time.PatchFlag

PatchFlag

is a further optimization ofBlock Tree. When comparing a single node, it will compare attributes, content, etc.

vue2

When comparing a single node, I don’t know which ones need to be compared, so compare them all once

vue3

Then you will know which attributes are dynamic. Each update only compares the dynamic attributes

l

.logo

. Only the content ofh1is dynamic, so it is marked when creating the standard virtual node

1

here is to mark that the content is dynamic, so when comparing, only comparecontentto see if it has changed. It greatly shortens the comparison time (it’s so scary)Summary

The above optimizations all rely on the powerful compiler of

vue3

It’s so scary(Learning video sharing:

web front-end development

,Introduction to programming)

The above is the detailed content of Why is vue3 fast? In what aspects does the efficiency of vue3 mainly improve?. For more information, please follow other related articles on the PHP Chinese website!