Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use Vue asynchronous components. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

I. introduction

Before we talk about asynchronous components, let's review the subcontracting operations when webpack is packaged. We can use import () to load the module asynchronously to achieve subcontracting. The return value of the import function is a Promise, so we can use then for the next step.

The following figure shows the packaged file directory, because if we load the math.js file synchronously, there is no intermediate file at this time, and when the browser requests resources, it will be very slow.

2. Asynchronous components in vue

Through the above webpack configuration, we understand why we need to subcontract. At this time, we want to think of a problem. If the page of a website downloads all the pages in the user's first browser, there will be a problem, that is, the first screen loads too slowly.

If our project is too large, for some components we want to load asynchronously (that is, subcontract processing), Vue provides us with a function defineAsyncComponentdefineAsyncComponent that can be passed in two types of parameters, the first is the function, which needs to return Promise, and the second parameter is an object type, which is configured for the asynchronous function.

The first way of writing: function writing.

Packaged file

The second way of writing: object writing

As shown in the figure, the subcontracting operation can be implemented, and the options in the incoming objects are described in detail.

Loader option: a loaded module is required, corresponding to a function.

LoadingComponent: the component displayed during loading.

ErrorComponent: the component that is displayed when loading fails.

Delay: give the time, and when the loading time exceeds that time, the error component is displayed directly.

Suspensible: defines whether the component can be suspended. The default is true.

III. Asynchronous components and suspense

Suspense is an API with experimental function and its function is variable.

The Suspense has two slots, one is the default, the other is the contents of the fallback,default slot are displayed when the components in the slot can be displayed, and if not, the contents of the fallback are displayed.

This is the end of this article on "how to use Vue Asynchronous components". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.