Jeder weiß, dass das Laden der erforderlichen Komponenten nur bei Verwendung die Geschwindigkeit beim ersten Laden der Seite effektiv verbessern kann. Wenn Sie beispielsweise die Route wechseln, werden Ihnen im folgenden Artikel hauptsächlich die relevanten Informationen zur Implementierung einer einfachen asynchronen Vue-Komponente vorgestellt. Freunde, die sie benötigen, können darauf verweisen.
Vorwort
Bei großen Anwendungen müssen wir die Anwendung möglicherweise in mehrere kleine Module aufteilen und diese bei Bedarf vom Server herunterladen. Um die Sache noch weiter zu vereinfachen, können Sie mit Vue.js eine Komponente als Factory-Funktion definieren, die die Komponentendefinition asynchron auflöst. Vue.js löst die Factory-Funktion nur dann aus, wenn die Komponente gerendert werden muss, und speichert die Ergebnisse für ein späteres erneutes Rendern zwischen.
Warum werden asynchrone Komponenten benötigt? Der Grund ist der gleiche wie beim On-Demand-Laden von Webpack. Wenn alle Komponenten zu Beginn geladen werden, ist dies zeitaufwändiger, sodass wir einige Komponenten als asynchrone Komponenten definieren können . Laden Sie es bei Bedarf.
Die Vorteile liegen also auf der Hand:
Das Laden auf Abruf kann die Zeit des ersten Ladens sparen, die Geschwindigkeit erhöhen und ist auch eine Leistung Optimierung.
Dann kann eine Komponente mehrmals verwendet werden. Wenn sie bei Bedarf geladen wird, wird sie nicht mehrmals geladen. Sie wird nach Abschluss des ersten Ladevorgangs zwischengespeichert Dasselbe wie Webpack, also keine Sorge
Als ich kürzlich die Vue-Dokumentation las, warf ich einen genaueren Blick auf den Teil der asynchronen Komponenten Als ich es das zweite Mal las, war ich immer noch etwas verwirrt. Beim dritten Mal war ich etwas verwirrt, und beim vierten Mal hatte ich das Gefühl, dass es klarer war Das Folgende ist eine einfache Demo der asynchronen Vue-Komponente, die ich geschrieben habe.
Beispielcode
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>Asynchrone Komponente Async-Comp.js,
Beachten Sie , dass Async-Comp.js nicht in index.html referenziert wird, sondern dynamisch in main.js unten geladen wird.
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
}
}
}
} )Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
So implementieren Sie die Positionierungsnavigation mit jquery
So implementieren Sie den Wechsel des linken und rechten Karussells in jquery
So verwenden Sie jquery, um einen Floor-Scrolling-Effekt zu erzielen
So erhalten Sie Daten und weisen sie der Seite in jQuery zu
in drei So implementieren Sie die 3D-Modellanzeige in .js
Das obige ist der detaillierte Inhalt vonEs gibt Beispiele für asynchrone Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
vue2与vue3中的生命周期执行顺序有什么区别May 16, 2023 pm 09:40 PMvue2与vue3中生命周期执行顺序区别生命周期比较vue2中执行顺序beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyedvue3中执行顺序setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g
快速搞懂Vue2 diff算法（图文详解）Mar 17, 2023 pm 08:23 PMdiff算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历。那么大家对diff算法吗有多少了解？下面本篇文章就来带大家深入解析下vue2的diff算法，希望对大家有所帮助！
VUE3开发基础：异步组件的使用教程Jun 15, 2023 pm 11:33 PMVue3是Vue.js最新的主要版本，与Vue2相比有许多新的功能和改进。其中一个最突出的改进之一是异步组件的使用。在本文中，我们将深入探讨Vue3中异步组件的使用方法和技巧。什么是异步组件?在Vue中，组件可以通过import语句或require函数引入。这些组件被称为同步组件，它们的代码在应用程序启动时被立即加载并编译。但是，当应用程序变得越来越大
vue为啥要使用异步组件Dec 13, 2022 pm 07:11 PM使用异步组件的原因：1、异步组件可以减少打包的结果，会将异步组件分开打包，会采用异步的方式加载组件，可以有效的解决一个组件过大的问题。2、异步组件的核心可以给组件定义变成一个函数，函数里面可以用import语法，实现文件的分割加载。
如何使用Vue的异步组件和Webpack Code Splitting提升应用性能Jul 17, 2023 pm 09:21 PM如何使用Vue的异步组件和WebpackCodeSplitting提升应用性能引言：随着Web应用越来越复杂，页面加载速度和性能成为了开发者关注的焦点。为了提高应用的性能，我们可以利用Vue的异步组件和Webpack的CodeSplitting功能。这两个功能结合起来可以帮助我们减少页面加载时间，提升用户体验。本文将介绍如何使用Vue的异步组件和Web
如何通过Vue的异步组件和Webpack的Lazy Loading提升应用性能Jul 18, 2023 pm 04:42 PM如何通过Vue的异步组件和Webpack的LazyLoading提升应用性能随着互联网技术的发展，Web应用程序的性能优化一直是开发者关注的重点。在过去，针对Web应用的性能优化主要集中在前端资源的减小和后端接口的优化上。然而，随着Vue.js的流行，通过异步组件和Webpack的LazyLoading可以进一步提升应用性能。Vue是一个轻量级的Java
vue中异步组件和动态组件的区别是什么Aug 26, 2022 pm 06:32 PM区别：1、动态组件是Vue中一个特殊的Html元素“<component>”，它拥有一个特殊的is属性，属性值可以是“已注册组件的名称”或“一个组件的选项对象”；而异步组件不是实物，是一个概念，一个可以让组件异步加载的方式。2、动态组件用于不同组件之间进行动态切换；而异步组件用于性能优化，比如减小首屏加载时间、加载资源大小。
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.
SecLists
SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.
PHPStorm Mac-Version
Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool
Dreamweaver CS6
Visuelle Webentwicklungstools
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
