Il existe des exemples de composants asynchrones dans Vue
Tout le monde sait que charger les composants requis uniquement lorsqu'ils sont utilisés peut améliorer efficacement la vitesse de chargement de la page pour la première fois. Par exemple, lors du changement d'itinéraire, l'article suivant vous présente principalement les informations pertinentes sur la façon d'implémenter un simple composant asynchrone Vue. L'article le présente en détail via un exemple de code. Les amis qui en ont besoin peuvent s'y référer.
Préface
Dans les grandes applications, nous pouvons avoir besoin de diviser l'application en plusieurs petits modules et de les télécharger depuis le serveur à la demande. Pour simplifier encore plus les choses, Vue.js vous permet de définir un composant en tant que fonction d'usine qui résout la définition du composant de manière asynchrone. Vue.js ne déclenche la fonction d'usine que lorsque le composant doit être rendu et met en cache les résultats pour un nouveau rendu ultérieur.
Pourquoi des composants asynchrones sont-ils nécessaires ? La raison est la même que pour le chargement à la demande du webpack. Si tous les composants sont chargés au début, cela prendra plus de temps, nous pouvons donc définir certains composants comme des composants asynchrones. . Chargez-le si nécessaire.
Les avantages sont donc évidents :
Le chargement à la demande peut gagner du temps lors du premier chargement, augmenter la vitesse, et constitue également une performance optimisation.
Ensuite, un composant peut être utilisé plusieurs fois s'il est chargé à la demande, il ne sera pas chargé plusieurs fois. Il sera mis en cache une fois le premier chargement terminé. pareil que webpack, donc ne vous inquiétez pas
Lorsque je lisais récemment la documentation de Vue, j'ai regardé de plus près la partie composant asynchrone. La première fois que je l'ai lu, j'étais. confus. La deuxième fois que je l'ai lu, j'étais encore un peu confus. La troisième fois, j'ai eu une idée, et j'ai senti que c'était plus clair la quatrième fois, alors je l'ai enregistré. Ce qui suit est une simple démo de composant asynchrone Vue. J'ai écrit.
Exemple de 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>Composant asynchrone Async-Comp.js,
Notez que Async-Comp.js n'est pas référencé dans index.html, mais est chargé dynamiquement dans main.js ci-dessous.
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
}
}
}
} )Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.
Articles connexes :
Comment implémenter la navigation de positionnement à l'aide de jquery
Comment implémenter la commutation de carrousel gauche et droite dans jquery
Comment utiliser jquery pour obtenir un effet de défilement au sol
Comment obtenir des données et les attribuer à la page dans jQuery
En trois Comment implémenter l'affichage du modèle 3D en .js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quelle est la différence entre l'ordre d'exécution du cycle de vie dans vue2 et vue3
May 16, 2023 pm 09:40 PM
Différences dans l'ordre d'exécution du cycle de vie entre vue2 et vue3 Comparaison du cycle de vie L'ordre d'exécution dans vue2 beforeCreate=>created=>beforeMount=>Mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed L'ordre d'exécution dans vue3 setup=>onBeforeMount= >onMounted=> onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g
Comprendre rapidement l'algorithme de comparaison Vue2 (explication graphique détaillée)
Mar 17, 2023 pm 08:23 PM
L'algorithme diff est un algorithme efficace qui compare les nœuds de l'arbre au même niveau, évitant ainsi d'avoir à rechercher et à parcourir l'arbre couche par couche. Alors, que savez-vous de l’algorithme de comparaison ? L'article suivant vous donnera une analyse approfondie de l'algorithme diff de vue2. J'espère qu'il vous sera utile !
Bases du développement VUE3 : tutoriel sur l'utilisation des composants asynchrones
Jun 15, 2023 pm 11:33 PM
Vue3 est la dernière version majeure de Vue.js et présente de nombreuses nouvelles fonctionnalités et améliorations par rapport à Vue2. L’une des améliorations les plus marquantes est l’utilisation de composants asynchrones. Dans cet article, nous approfondirons l'utilisation et les techniques des composants asynchrones dans Vue3. Que sont les composants asynchrones ? Dans Vue, les composants peuvent être introduits via l'instruction import ou la fonction require. Ces composants sont appelés composants synchrones et leur code est chargé et compilé immédiatement au démarrage de l'application. Cependant, à mesure que l'application devient plus grande
Pourquoi Vue utilise-t-il des composants asynchrones ?
Dec 13, 2022 pm 07:11 PM
Raisons d'utiliser des composants asynchrones : 1. Les composants asynchrones peuvent réduire les résultats de packaging, empaqueter les composants asynchrones séparément et charger les composants de manière asynchrone, ce qui peut résoudre efficacement le problème d'un composant trop volumineux. 2. Le noyau du composant asynchrone peut être défini comme une fonction et la syntaxe d'importation peut être utilisée dans la fonction pour réaliser un chargement fractionné des fichiers.
Comment utiliser les composants asynchrones de Vue et Webpack Code Splitting pour améliorer les performances des applications
Jul 17, 2023 pm 09:21 PM
Comment utiliser les composants asynchrones de Vue et WebpackCodeSplitting pour améliorer les performances des applications Introduction : À mesure que les applications Web deviennent de plus en plus complexes, la vitesse et les performances de chargement des pages sont devenues la priorité des développeurs. Afin d'améliorer les performances de l'application, nous pouvons profiter des composants asynchrones de Vue et de la fonction CodeSplitting de Webpack. Ces deux fonctionnalités combinées peuvent nous aider à réduire le temps de chargement des pages et à améliorer l'expérience utilisateur. Cet article présentera comment utiliser les composants asynchrones de Vue et le Web
Parlons de la façon de configurer l'interface 404 dans Vue2 et Vue3
Feb 17, 2023 pm 02:25 PM
Cet article vous guidera à travers l'apprentissage de Vue et expliquera comment configurer l'interface 404 dans Vue2 et Vue3. J'espère qu'il vous sera utile !
Comment améliorer les performances des applications grâce aux composants asynchrones de Vue et au Lazy Loading de Webpack
Jul 18, 2023 pm 04:42 PM
Comment améliorer les performances des applications grâce aux composants asynchrones de Vue et au LazyLoading de Webpack Avec le développement de la technologie Internet, l'optimisation des performances des applications Web a toujours été au centre des préoccupations des développeurs. Dans le passé, l'optimisation des performances des applications Web se concentrait principalement sur la réduction des ressources front-end et l'optimisation des interfaces back-end. Cependant, avec la popularité de Vue.js, les performances des applications peuvent être encore améliorées grâce aux composants asynchrones et au LazyLoading de Webpack. Vue est un Java léger
Un article explique en détail comment vue2 implémente la fonction de chargement déroulant avec amortissement
Feb 20, 2023 pm 12:07 PM
Cet article vous apporte des connaissances pertinentes sur vue2. Il explique principalement comment la fonction de chargement déroulant amorti est implémentée dans vue2. Les amis intéressés peuvent jeter un œil ci-dessous. J'espère que cela sera utile à tout le monde.
