Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "the efficiency improvement method of vue3". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this article "the efficiency improvement method of vue3" can help you solve the problem.

Promotion of static nodes

What is a static node?

The so-called static node is the tag written in the template template in vue and the tag does not use the v-bind binding attribute, which is considered as a static node in vue3. (learn video sharing: vuejs tutorial)

/ / static node does not bind any attributes Hello World / / static nodes do not bind any attributes {{text}} export default {data () {return {text: 'Hello World',}},}

Vue3 saves the static node as a variable in the render function, so the static node is created only once.

/ / vue2 static node render () {createVNode ("H2", null, "Hello World")} / / vue3 static node const H2 = createVNode ("H2", null, "Hello World") render () {/ / can be used directly}

To prove this, create a vue3 project locally and look at the network request

Static properties are also promoted / / container this is a static property {{text}} / / the content is dynamic export default {data () {return {text: 'Hello World',}},}

Container also uses variables to save

Pre-serialization

In actual development, a large part of template is actually static nodes.

Logo menu {{user.name}} export default {data () {return {user: {name: 'Zhang San'}},}

The compiler of vue3 encounters a large number of consecutive static nodes and compiles them directly into a normal character creation node.

The entire div of .logo .nav is a static node, and it will be created recursively according to the way vue2 is handled.

While in vue3, it is directly converted to a string, and then the real dom is assigned to the innerHTML attribute, which reduces the recursive creation time in vue2.

The performance improvement of pre-serialization is not tightly improved when it is first created, and when the render function is re-rendered, the improvement reduces the comparison time of a large number of virtual nodes (very scary).

Cache event handler click export default {data () {return {}}, methods: {handleClick () {console.log ('clicked')}},}

HandleClick event, compare the handling of vue2 and vue3

/ / vue2render (ctx) {return createVNode ("button", {onclick: function ($event) {console.log ('clicked')})} / / vue3export function render (_ ctx, _ cache, $props, $setup, $data, $options) {return (_ openBlock (), _ createBlock ("button") {onClick: _ cache [1] | | (_ cache [1] = (... args) = > ($options.handleClick & & $options.handleClick (.args))}, "click")})}

_ cache [1] | | (_ cache [1] = (... args) = > ($options.handleClick & & $options.handleClick (.. ARGs) this code is the cache of event functions.

Block Tree

Vue3 also optimizes the comparison of virtual node trees.

When comparing the new and old node trees, vue2 does not know which nodes are static and which nodes are dynamic, so it can only be compared layer by layer, which leads to a lot of time wasted on static node comparison.

How vue3 compares, in fact, when creating a node, there is a tag that records the type of the node

The-1 here actually marks the type of node, so when in Block Tree, you can skip the comparison of static nodes directly according to this tag, thus reducing the comparison time.

PatchFlag

PatchFlag is a further optimization of Block Tree, comparing attributes, content, and so on when comparing individual nodes.

Vue2 doesn't know what to compare when comparing a single node, so compare it all at once.

Vue3 knows that those attributes are dynamic, and each update only compares dynamic attributes.

{{text}} export default {data () {return {text: 'Hello World',}},}

Only the content of H2 in l.logo is dynamic, so when you create a standard virtual node, you mark it.

The 1 here marks that the content is dynamic, so when making a comparison, it only compares whether the content has changed, which greatly shortens the comparison time (horror)

This is the end of the content about "the method of improving the efficiency of vue3". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.