There are examples of asynchronous components in Vue
Everyone knows that loading the required components only when used can effectively improve the speed of loading the page for the first time. For example, when switching routes, the following article mainly introduces you to the relevant information on how to implement a simple Vue asynchronous component. The article introduces it in detail through sample code. Friends who need it can refer to it.
Preface
In large applications, we may need to split the application into multiple small modules and download them from the server on demand. To simplify things even further, Vue.js allows you to define a component as a factory function that resolves the component definition asynchronously. Vue.js only triggers the factory function when the component needs to be rendered, and caches the results for subsequent re-rendering.
Why asynchronous components are needed? The reason is the same as webpack's on-demand loading. If all components are loaded at the beginning, it will be more time-consuming, so we can define some components as asynchronous components. Load it when needed.
So the benefits are obvious:
Loading on demand can save the time of first loading, increase the speed, and is also a performance optimization. .
Then a component may be used multiple times. If it is loaded on demand, it will not be loaded multiple times. It will be cached after the first load is completed, which is the same as webpack, so Don’t worry
When I was reading the Vue documentation recently, I took a closer look at the asynchronous component part. The first time I read it, I was confused. The second time I read it, I was still a little confused. The third time I read it, I was a little confused. I got a feel for it, and I felt it was clearer the fourth time, so I recorded it. The following is a simple Vue asynchronous component Demo I wrote.
Example code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<script>
// 如果浏览器不支持Promise就加载promise-polyfill
if ( typeof Promise === 'undefined' ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
document.head.appendChild( script );
}
</script>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<p id="app" style="font-size: 22px">
<!-- 异步组件async-comp -->
<async-comp :list="['我是一个异步组件，','如果加载完成，','我就会在这里显示']"></async-comp>
</p>
<!-- 引入main.js -->
<script src="/main.js"></script>
</body>
</html>Asynchronous component Async-Comp.js,
Note, Async-Comp.js is not referenced in index.html, but is dynamically loaded in main.js below.
window.async_comp = {
template: '\
<ol>\
<li v-for="item in list">{{ item }}</li>\
</ol>',
props: {
list: Array
}
};main.js
var vm = new Vue( {
el: '#app',
components: {
/* 异步组件async-comp */
'async-comp': function () {
return {
/** 要渲染的异步组件，必须是一个Promise对象 */
component: new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = '/Async-Comp.js';
document.head.appendChild( script );
script.onerror = function () {
reject( 'load failed!' );
}
script.onload = function () {
if ( typeof async_comp !== 'undefined' )
resolve( async_comp );
else reject( 'load failed!' )
}
} ),
/* 加载过程中显示的组件 */
loading: {
template: '<p>loading...</p>'
},
/* 出现错误时显示的组件 */
error: {
template: '\
<p style="color:red;">load failed!</p>\
'
},
/* loading组件的延迟时间 */
delay: 10,
/* 最长等待时间，如果超过此时间，将显示error组件。 */
timeout:3200
}
}
}
} )The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement positioning navigation using jquery
How to implement left and right carousel switching in jquery
How to achieve floor scrolling effect using jquery
How to get data and assign it to the page in jQuery
In three How to implement 3D model display in .js
The above is the detailed content of There are examples of asynchronous components in Vue. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
What is the difference between the life cycle execution order in vue2 and vue3
May 16, 2023 pm 09:40 PM
Difference in life cycle execution order between vue2 and vue3 Life cycle comparison The execution order in vue2 beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed The execution order in vue3 setup=>onBeforeMount=>onMounted=> onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g
Quickly understand the Vue2 diff algorithm (detailed graphic explanation)
Mar 17, 2023 pm 08:23 PM
The diff algorithm is an efficient algorithm that compares tree nodes at the same level, avoiding the need to search and traverse the tree layer by layer. So how much do you know about the diff algorithm? The following article will give you an in-depth analysis of the diff algorithm of vue2. I hope it will be helpful to you!
VUE3 development basics: tutorial on using asynchronous components
Jun 15, 2023 pm 11:33 PM
Vue3 is the latest major version of Vue.js and has many new features and improvements compared to Vue2. One of the most prominent improvements is the use of asynchronous components. In this article, we will delve into the usage and techniques of asynchronous components in Vue3. What are asynchronous components? In Vue, components can be introduced through the import statement or require function. These components are called synchronous components, and their code is loaded and compiled immediately when the application starts. However, as the application becomes larger
Why does Vue use asynchronous components?
Dec 13, 2022 pm 07:11 PM
Reasons for using asynchronous components: 1. Asynchronous components can reduce packaging results, package asynchronous components separately, and load components asynchronously, which can effectively solve the problem of a component that is too large. 2. The core of the asynchronous component can be defined as a function, and the import syntax can be used in the function to realize split loading of files.
How to use Vue's asynchronous components and Webpack Code Splitting to improve application performance
Jul 17, 2023 pm 09:21 PM
How to use Vue's asynchronous components and WebpackCodeSplitting to improve application performance Introduction: As web applications become more and more complex, page loading speed and performance have become the focus of developers. In order to improve the performance of the application, we can take advantage of Vue's asynchronous components and Webpack's CodeSplitting function. These two features combined can help us reduce page loading time and improve user experience. This article will introduce how to use Vue's asynchronous components and the Web
Let's talk about how to set up the 404 interface in Vue2 and Vue3
Feb 17, 2023 pm 02:25 PM
This article will take you through Vue learning and talk about how to set up the 404 interface in Vue2 and Vue3. I hope it will be helpful to you!
How to improve application performance through Vue's asynchronous components and Webpack's Lazy Loading
Jul 18, 2023 pm 04:42 PM
How to improve application performance through Vue's asynchronous components and Webpack's LazyLoading. With the development of Internet technology, performance optimization of Web applications has always been the focus of developers. In the past, performance optimization for web applications mainly focused on reducing front-end resources and optimizing back-end interfaces. However, with the popularity of Vue.js, application performance can be further improved through asynchronous components and Webpack's LazyLoading. Vue is a lightweight Java
An article explains in detail how vue2 implements the pull-down loading function with damping
Feb 20, 2023 pm 12:07 PM
This article brings you relevant knowledge about vue2. It mainly talks about how the function of damped pull-down loading is implemented in vue2. Friends who are interested can take a look at it together. I hope it will be helpful to everyone. helpful.
