在Vue中有关于异步组件的示例
大家都知道当使用时才装入需要的组件，可以有效的提高首次装入页面的速度。比如在路由切换时，下面这篇文章主要给大家介绍了关于如何实现一个简单的Vue异步组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
前言
在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js 允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。
为什么需要异步组件，道理和webpack的按需加载是一样的，如果一开始就加载所有的组件，那么是比较耗时的，所以我们可以将一些组件定义为异步组件，在需要使用的时候再进行加载。
所以好处的话就显而易见了 ：
按需加载，可以节省首次加载的时间，提高速度，也算是一个性能优化。
那么一个组件可能会被使用多次，按需加载的话也不会加载多次，第一次加载完成就会缓存下来，和webpack是一样的，所以不用担心
最近读Vue文档的时候仔细看了一下异步组件部分，第一次看的时候一脸懵逼，看第二次还是有点迷茫，第三次就有点感觉了，第四次感觉有点明白了，遂记录一下，下面是我写的一个简单Vue异步组件Demo。
实例代码
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>异步组件Async-Comp.js，
注意，Async-Comp.js并没有在index.html中引用，而是在下面的main.js中动态加载。
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
}
}
}
} )上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 在Vue中有关于异步组件的示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Apakah perbezaan antara susunan pelaksanaan kitaran hayat dalam vue2 dan vue3
May 16, 2023 pm 09:40 PM
Perbezaan dalam susunan pelaksanaan kitaran hayat antara vue2 dan vue3 Perbandingan kitaran hayat Perintah pelaksanaan dalam vue2 beforeCreate=>dibuat=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>musnah Perintah pelaksanaan dalam persediaan vue3==>onBeforeMount >onMounted=> onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g
Fahami dengan cepat algoritma perbezaan Vue2 (penjelasan grafik terperinci)
Mar 17, 2023 pm 08:23 PM
Algoritma diff ialah algoritma cekap yang membandingkan nod pokok pada tahap yang sama, mengelakkan keperluan untuk mencari dan melintasi lapisan pokok demi lapisan. Jadi berapa banyak yang anda tahu tentang algoritma diff? Artikel berikut akan memberi anda analisis mendalam tentang algoritma perbezaan vue2. Saya harap ia akan membantu anda!
Asas pembangunan VUE3: tutorial menggunakan komponen tak segerak
Jun 15, 2023 pm 11:33 PM
Vue3 ialah versi utama terkini Vue.js dan mempunyai banyak ciri dan penambahbaikan baharu berbanding Vue2. Salah satu penambahbaikan yang paling ketara ialah penggunaan komponen tak segerak. Dalam artikel ini, kita akan mendalami penggunaan dan teknik komponen tak segerak dalam Vue3. Apakah komponen tak segerak dalam Vue, komponen boleh diperkenalkan melalui penyataan import atau memerlukan fungsi. Komponen ini dipanggil komponen segerak, dan kodnya dimuatkan dan disusun serta-merta apabila aplikasi bermula. Walau bagaimanapun, apabila aplikasi menjadi lebih besar
Mengapakah Vue menggunakan komponen tak segerak?
Dec 13, 2022 pm 07:11 PM
Sebab untuk menggunakan komponen tak segerak: 1. Komponen tak segerak boleh mengurangkan hasil pembungkusan, membungkus komponen tak segerak secara berasingan, dan memuatkan komponen secara tak segerak, yang boleh menyelesaikan masalah komponen yang terlalu besar dengan berkesan. 2. Teras komponen tak segerak boleh ditakrifkan sebagai fungsi, dan sintaks import boleh digunakan dalam fungsi untuk merealisasikan pemuatan berpecah bagi fail.
Cara menggunakan komponen tak segerak Vue dan Pemisahan Kod Webpack untuk meningkatkan prestasi aplikasi
Jul 17, 2023 pm 09:21 PM
Cara menggunakan komponen tak segerak Vue dan WebpackCodeSplitting untuk meningkatkan prestasi aplikasi Pengenalan: Apabila aplikasi web menjadi semakin kompleks, kelajuan dan prestasi memuatkan halaman telah menjadi tumpuan pembangun. Untuk meningkatkan prestasi aplikasi, kami boleh memanfaatkan komponen tak segerak Vue dan fungsi CodeSplitting Webpack. Kedua-dua ciri ini digabungkan boleh membantu kami mengurangkan masa memuatkan halaman dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan komponen tak segerak Vue dan Web
Mari kita bincangkan tentang cara menyediakan antara muka 404 dalam Vue2 dan Vue3
Feb 17, 2023 pm 02:25 PM
Artikel ini akan membawa anda melalui pembelajaran Vue dan bercakap tentang cara menyediakan antara muka 404 dalam Vue2 dan Vue3 Saya harap ia akan membantu anda.
Cara meningkatkan prestasi aplikasi melalui komponen tak segerak Vue dan Lazy Loading Webpack
Jul 18, 2023 pm 04:42 PM
Cara meningkatkan prestasi aplikasi melalui komponen tak segerak Vue dan LazyLoading Webpack Dengan perkembangan teknologi Internet, pengoptimuman prestasi aplikasi Web sentiasa menjadi tumpuan pembangun. Pada masa lalu, pengoptimuman prestasi untuk aplikasi web tertumpu terutamanya pada mengurangkan sumber bahagian hadapan dan mengoptimumkan antara muka bahagian belakang. Walau bagaimanapun, dengan populariti Vue.js, prestasi aplikasi boleh dipertingkatkan lagi melalui komponen tak segerak dan LazyLoading Webpack. Vue ialah Java ringan
Satu artikel menerangkan secara terperinci cara vue2 melaksanakan fungsi pemuatan tarik-turun dengan redaman
Feb 20, 2023 pm 12:07 PM
Artikel ini membawakan anda pengetahuan yang berkaitan tentang vue2 terutamanya tentang bagaimana fungsi pemuatan tarik ke bawah dilaksanakan dalam vue2. Rakan-rakan yang berminat boleh melihatnya bersama-sama.
