Comparison of the advantages of vue3 and vue2

Abstract:

The concept of the new version of Vue3 was formed at the end of 2018, when Vue 2 was already two and a half years old. Compared with the life cycle of general software, this doesn’t seem that long. Vue3 was officially launched in 2020, with major changes in source code and API. The performance has been significantly improved, which is 1.2~2 times faster than Vue2.x.

The concept of the new version of Vue3 was formed at the end of 2018, when Vue 2 was already two and a half years old. Compared with the life cycle of general software, this doesn’t seem that long. Vue3 was officially launched in 2020, with major changes in source code and API. The performance has been significantly improved, which is 1.2~2 times faster than Vue2.x.

Among them, some of the more important advantages are:

Optimization of diff algorithm: hoistStatic static improvement; cacheHandlers event listener cache; ssr rendering; better Ts support; Compostion API : combination API/injection API; more advanced components; custom rendering API; on-demand compilation, smaller size than vue2.x; support for multi-root node components, etc.

Let's talk about the advantages of vue3 in detail:

Advantage 1: Optimization of diff algorithm

The virtual DOM in Vue2 is a full comparison (each node, whether hardcoded or dynamic, will be compared layer by layer, which wastes most of the events on comparing static nodes)

Vue3 adds a static flag ( patchflag ). When comparing with the last virtual node, only the nodes with patch flag (the nodes where dynamic data is located) are compared; the flag information can be used to know the specific content of the current node to be compared.

For example, the following template contains a div with three paragraphs. The first two paragraphs are static and fixed, while the content of the third paragraph is bound to the msg attribute. When msg changes, Vue will generate a new virtual DOM and compare it with the old one.

<div>
 <p>Cloud Residence Co-creation</p>
 <p>How to evaluate vue3</p>
 <p>{{msg}}</p>
</div>

When the view is updated, only the dynamic nodes are diffed, which reduces resource consumption. Patchflag is an enumeration. A value of 1 means that the text of this element is dynamically bound, and a value of 2 means that class of the element is dynamically bound.

Advantage 2: hoistStatic static lifting

Vue2 will recreate and render each time regardless of whether the element participates in the update. For elements that do not participate in the update, Vue3 will perform static promotion. They will only be created once and can be reused directly during rendering. For example, let's use Vue 3 Template Explorer to get an intuitive feel for it:

<div>
    <div>Co-create 1</div>
    <div>Co-create 2</div>
    <div>{{name}}</div>
</div>

Before static lifting

export function render(...) {
    return (
        _openBlock(),
        _createBlock('div', null, [
            _createVNode('div', null, 'Co-create 1'),
            _createVNode('div', null, 'Co-creation 2'),
            _createVNode(
                'div',
                null,
                _toDisplayString(_ctx.name),
                1 /* TEXT */
            ),
        ])
    )
}

After static lifting

const _hoisted_1 = /*#__PURE__*/ _createVNode(
    'div',
    null,
    'Co-create 1',
    -1 /* HOISTED */
)
const _hoisted_2 = /*#__PURE__*/ _createVNode(
    'div',
    null,
    'Co-creation 2',
    -1 /* HOISTED */
)

export function render(...) {
    return (
        _openBlock(),
        _createBlock('div', null, [
            _hoisted_1,
            _hoisted_2,
            _createVNode(
                'div',
                null,
                _toDisplayString(_ctx.name),
                1 /* TEXT */
            ),
        ])
    )
}

From the above code ，_hoisted_1 and _hoisted_2 methods are promoted outside the rendering function render , which is what we call static promotion. Static promotion can avoid recreating these objects every time you render, thereby greatly improving rendering efficiency.

Advantage 3: cacheHandlers event listener cache

In vue2.x, a new function must be regenerated and updated each time a bound event is triggered. cacheHandlers is an event cache object provided in Vue3. When cacheHandlers is turned on, an inline function will be automatically generated and a static node will be generated at the same time. When the event is triggered again, it only needs to be called from the cache without updating again.

By default, onClick is considered a dynamic binding, so its changes will be tracked every time. However, there is no need to track changes for the same function, you can just cache it and reuse it.

For example, let's use Vue 3 Template Explorer to see the effect of event listener caching:

<div>
    <div @click="todo">Do something fun</div>
</div>

After compilation, this section of html becomes the following structure (event monitoring cache is not enabled):

export function render(...) {
    return (_openBlock(),_createBlock('div', null, [
            _createVNode('div',{ onClick: _ctx.todo}, 'Do something interesting', 8 /* PROPS */,
                ['onClick']),
        ])
    )
}

When we turn on event listener caching:

export function render(...) {
    return (_openBlock(),_createBlock('div', null, [
            _createVNode('div',{
                    onClick: //After enabling monitoring_cache[1] || (_cache[1] = (...args) =>_ctx.todo(...args)),
                },'Do something interesting'),
        ])
    )
}

We can compare the code before and after turning on the event listening cache. You may not understand the code after the conversion, but it doesn’t matter. We just need to observe whether there are static tags. In the diff algorithm of Vue3, only those with static tags will be compared and tracked.

Advantage 4: SSR rendering

Vue2 also has SSR rendering, but the SSR rendering in Vue3 has corresponding performance improvements compared to Vue2.

When there is a large amount of static content, this content will be pushed into a buffer as a pure string. Even if there is dynamic binding, it will be sneaked in through template interpolation. This will be much faster than rendering through virtual dmo.

When the static content is large enough, the _createStaticVNode method will be used to generate a static node on the client. These static nodes will be directly innerHtml , so there is no need to create objects and then render them according to the objects.

Advantage 5: Better Ts support

Vue2 is not suitable for using ts because of the Option API style of vue2 . options is a simple object, while ts is a type system and object-oriented syntax. The two are a bit of a mismatch.

In the specific practice of combining vue2 with ts, vue-class-component is used to strengthen vue components, Script supports TypeScript decorators, and vue-property-decorator is used to add more decorators that combine Vue features. In the end, the component writing methods of ts and js are quite different.

In vue3, a defineComponent function is tailored to enable components to better utilize parameter type inference under ts. In the Composition API coding style, the more representative APIs are ref and reactive, which also support type declarations very well.

import { defineComponent, ref } from 'vue'
const Component = defineComponent({
    props: {
        success: { type: String },
        student:
          type: Object as PropType<Student>,
          required: true
       }
    },
    setup() {
      const year = ref(2020)
      const month = ref<string | number>('9')
      month.value = 9 // OK
     const result = year.value.split('') 
 }

Advantage 6: Compostion API: Combination API/Injection API

Traditional web pages are separated by html/css/javascript (structure/style/logic). Vue uses componentization to put closely related structures/styles/logics together, which is conducive to code maintenance. compostionapi goes a step further and focuses on the JS (logic) part, putting logically related code together, which is more conducive to code maintenance.

The Option API style ( data/methods/mounted ) is used to organize the code in vue2 components, which will disperse the logic. For example, to complete a counter function, we need to declare variables in data, define response functions in methods , and initialize variables in mounted . If you want to maintain such a function in a component with many functions and a large amount of code, you need to repeatedly switch to the corresponding position in data/methods/mounted and then change the code.

In vue3, use the setup function. As shown below, the logic related to count is placed in the counter.js file, and the logic related to todo is placed in todos.js.

import useCounter from './counter'
import useTodo from './todos'

setup(){
let { val, todos, addTodo } = useTodo()
let { count, add } = useCounter() 
return {
val, todos, addTodo,
count,add,
}

Advantage 7: More advanced components

Vue2 does not allow this to be written. The component must have a root node. Now you can write it like this, and Vue will create a virtual Fragment node for us.

<template>
<div>Huawei Cloud Experts</div>
<div>Full stack blogger</div>
</template>

Before Suspended-component is fully rendered, the alternate content is shown. If it is an asynchronous component, Suspense can wait for the component to be downloaded, or perform some asynchronous operations in the setup function.

Advantage 8: Custom Rendering API

The vue2.x project architecture is not very friendly for rendering to different platforms such as weex (a cross-platform solution for mobile devices) and myvue (used on mini programs). Vue3.0 launched a custom rendering API to solve this problem. Next, let's take a look at the differences between the entry writing methods of vue2 and vue3.

vue2:

import Vue from 'vue'
import App from './App.vue'
new Vue({ => h(App)}).$mount('#app')

vue3:

const { createApp } from 'vue'
import App from "./src/App"
createApp(App).mount(('#app')

createApp officially implemented by vue will generate HTML code for our template mapping, but if you don't want to render to HTML, but want to render to canvas or other non-HTML code, you need to use Custom Renderer API to define your own render generation function.

import { createApp } from "./runtime-render";
import App from "./src/App"; // Root component createApp(App).mount('#app');

Using custom rendering APIs, such as weex and myvue the problem is perfectly solved. Just override createApp .

Advantage 9: Compile on demand, smaller in size than vue2.x

The size of the frame also affects its performance. This is a unique concern for web applications, because since resources need to be downloaded on the fly, the application is not interactive until the browser has parsed the necessary JavaScript. This is especially true for single-page applications. Although Vue has always been relatively lightweight (Vue 2's runtime size is 23 KB compressed).

In Vue 3, this was achieved by moving most of the global API and internal helpers to ES module exports. This allows modern bundlers to statically analyze module dependencies and remove unused export-related code. The template compiler also generates friendly Tree-shaking code and imports the function helper when the function is actually used in the template.

Some parts of the framework will never be Tree-shaking , because they are essential for any type of application. We call the measurements of these essential parts baseline dimensions. Despite the addition of many new features, the baseline size of Vue 3 is about 10 KB gzipped, less than half of Vue 2.

Advantage 10: Support multiple root node components

In Vue3, a template is no longer limited to multiple root nodes. ( Attribute inheritance on multiple root nodes) It is necessary to explicitly define where attribute should be distributed. Otherwise the console will give a warning prompt.

In Vue 3, components now officially support multi-root components, aka fragments!

In 2.x, multi-root components were not supported and a warning was issued when the user accidentally created a multi-root component, so to fix this bug many components were wrapped in one. as follows

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

In 3.x, components can now have multiple root nodes! However, this does require the developer to explicitly define where the attributes should be distributed.

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Summarize:

• Vue is one of the most popular front-end frameworks in China. Performance is improved, running speed is 1.2-2 times that of vue2.
• Smaller in size, the on-demand compilation size of vue2 is smaller.
• Type inference and better support for ts are also a trend.
• High-level APIs expose lower-level APIs and provide more advanced built-in components.
• Combined APIs can better organize logic, encapsulate logic, and reuse logic

This is the end of this article about the advantages of vue3 over vue2. For more information about the advantages of vue3 over vue2, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!