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

Difference: 1. Dynamic component is a special Html element "" 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.

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 beimportintroduced where needed, for example:

import MyComponent from '../components/my-component.vue' new Vue({ // ... components: {MyComponent} })

Introduced in this way,MyComponentDuring 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 ofasynchronous 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: '
I am async!
' }) }, 1000) })

The above example usessetTimeoutto simulate asynchronous acquisition of components. In real situations, you can even request the template after component compilation through ajax, and then call theresolvemethod; if the loading fails, You can call therejectmethod

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

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

This specialrequiresyntax 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 similardynamic component, and always confuse the relationship between the two.

In fact,dynamic componentsandasynchronous componentsare completely different! ! !

Go directly to the summary

Dynamic component: It is a special Html element in Vue:, It has a specialisattribute, the attribute value can beThe name of a registered componentorThe 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!