What is the difference between asynchronous components and dynamic components in Vue

Difference: 1. Dynamic component is a special Html element "<component>" in Vue. It has a special is attribute. The attribute value can be "the name of a registered component" or "a component "option object"; an asynchronous component is not a physical object, but a concept, a way to load components asynchronously. 2. Dynamic components are used for dynamic switching between different components; asynchronous components are used for performance optimization, such as reducing the first screen loading time and loading resource size. <component>

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Asynchronous components

In some large-scale Vue applications, whether it is for code extraction or logical division, the application will inevitably be divided into some A small block of code forms a component in our consciousness. It can be import introduced where needed, for example:

    import MyComponent from '../components/my-component.vue'

    new Vue({
        // ...
        components: {MyComponent}
    })

Introduced in this way, MyComponent During the construction process, it will be synchronized into the bundle.js of the page

At this time, in some scenarios, such as:

1. The size of this component is very large Big

2. It is not required from the beginning of the page

Then during the construction process, we will enter the component code into the page js, Obviously it is inappropriate

Vue provides a concept of asynchronous components: only loaded from the server when needed

We can define it like this:

    Vue.component('async-example', function (resolve, reject) {
        setTimeout(function () {
            // 向 `resolve` 回调传递组件定义
            resolve({
                template: '<div>I am async!</div>'
            })
        }, 1000)
    })

The above example uses setTimeout to simulate asynchronous acquisition of components. In real situations, you can even request the template after component compilation through ajax, and then call the resolve method; if the loading fails, You can call the reject method

In most cases, our components are separated into a .vue file, then we can do this:

    Vue.component('async-webpack-example', function (resolve) {
        require(['./my-async-component'], resolve)
    })

This special require syntax will tell webpack to automatically split your build code into multiple packages, which will be loaded through Ajax requests

So if your page does not When you use this component, you will naturally not request the js package of the component

Of course, you can also register the asynchronous component locally

    new Vue({
    // ...
        components: {
            'my-component': () => import('./my-async-component')
        }
    })

Dynamic component

said When it comes to asynchronous components, many people will think of another similar dynamic component, and always confuse the relationship between the two.

In fact, dynamic components and asynchronous components are completely different! ! !

Go directly to the summary

Dynamic component: It is a special Html element in Vue: <component>, It has a special is attribute, the attribute value can be The name of a registered component or The option object of a component, which is used between different components Perform dynamic switching.

Asynchronous component: Simply put, it is a concept, a way to load components asynchronously; it is generally used for performance optimization, such as reducing the first screen loading time and loading resource size .

(Learning video sharing: Web front-end introduction, vue video tutorial)

The above is the detailed content of What is the difference between asynchronous components and dynamic components in Vue. For more information, please follow other related articles on the PHP Chinese website!