preface

  1. Learn vue2. X first, many 2.
  2. Learn TypeScript first. Vue3.0 is rewritten in TS, and you must learn TS if you want to know how and why.

Why learn VUe3.0?

  • Performance is 1.2 ~ 2 times faster than vue2.x
  • Compiled on demand, smaller in size than vue2.x
  • Composite API (similar to React Hook)
  • Better TS support
  • Expose the custom rendering API
  • More advanced components

How does Vue3.0 get faster?

  • Diff method optimization

The virtual DOM in Vue 2.x is for full comparison. Vue3.0 adds static tags. When comparing with the last virtual node, only the node with patch flag is compared, and you can know the specific content of the current node to be compared based on the flag information.

Let’s take an example. Here’s the code snippet.

<div>
  <p>The label</p>
  <p>{{msg}}</p>
</div>
Copy the code

The DIff algorithm of vue2.x is a comparison of the whole virtual DOM tree.When creating the virtual DOM, the DIff algorithm of VUe3.0 will add static tags according to whether the content in the DOM changes. Only nodes with patch flags are compared.

We might not be able to see this picture up here, so let’s visualize it in another way. As you can see in the figure below, static tag 1 exists in the element with the data binding. The test site is https://vue-next-template-explorer.netlify.app/.

  • hoistStatic (static promotion)

Vue2.x is recreated each time, whether or not the element participates in the update, and then rendered. In VUe3.0, elements that do not participate in the update will be static promoted. They will only be created once and reused directly during rendering.

If we go back to the test site and check the static tag option, we will see that the fixed tag on the right, which is the

tag here

, is placed outside the render function. So this will only be created globally once, which is a significant performance improvement.

  • cacheHandlers

By default, events such as onClick are treated as dynamically bound, so its changes are tracked each time, but because it’s the same function, you don’t need to track the changes, just cache them and reuse them. Ok, let’s compare before and after the event listener cache is enabled.

The event listener cache is not enabled

We will see that there is a static tag, so it will be tracked every time.

Turn on the event listener cache

Put a checkmark before the event listener cache and enable it. We see that without static tags, there is no comparison tracking and performance improves.

conclusion

Welcome to follow my public account “The Road of the Front-end History”.

​

Reply to the keyword e-book, you can get nearly 12 front end popular e-books.

​

Reply to the keyword Little Red Book 4th edition, you can get the latest “JavaScript Advanced Programming” (4th edition) ebook.

​

You can also add my wechat, I drew a lot of IT bosses, created a technical exchange, article sharing group, welcome you to join.

​

  • Author: Vam’s golden bean road

  • Main area: Front-end development

  • My wechat is Maomin9761

  • Wechat official Account: The road to the front

​ ​