Was ist der Unterschied zwischen asynchronen Komponenten und dynamischen Komponenten in Vue?

Unterschied: 1. Die dynamische Komponente ist ein spezielles HTML-Element „<component>“. Es verfügt über ein spezielles Attribut. Der Attributwert kann „der Name einer registrierten Komponente“ oder „ein Optionsobjekt einer Komponente“ sein " ; Asynchrone Komponenten sind keine physischen Objekte, sondern ein Konzept, eine Möglichkeit, Komponenten asynchron zu laden. 2. Dynamische Komponenten werden für den dynamischen Wechsel zwischen verschiedenen Komponenten verwendet. Asynchrone Komponenten dienen der Leistungsoptimierung, z. B. der Reduzierung der Ladezeit des ersten Bildschirms und der Laderessourcengröße. <component>

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Asynchrone Komponenten

In einigen großen Vue-Anwendungen, sei es zur Codeextraktion oder zur logischen Aufteilung, wird die Anwendung zwangsläufig in einige kleine Codeblöcke unterteilt, die in unserem Bewusstsein Komponenten bilden. Import Code> kann bei Bedarf eingefügt werden, zum Beispiel: <code>import 引入，例如下面：

    import MyComponent from '../components/my-component.vue'

    new Vue({
        // ...
        components: {MyComponent}
    })

这种方式引入，MyComponent 在构建的过程中，会被同步打入页面的bundle.js中

这个时候，在某些场景中，比如：

1、这个组件的体积很大

2、它不是页面一开始就需要的

那么我们在构建的过程中，就将组件代码打入页面js中，显然是不合适的

Vue提供了一种异步组件的概念：只在需要的时候才从服务器加载

我们可以这么定义：

    Vue.component('async-example', function (resolve, reject) {
        setTimeout(function () {
            // 向 `resolve` 回调传递组件定义
            resolve({
                template: '<div>I am async!</div>'
            })
        }, 1000)
    })

上面的例子，采用 setTimeout 模拟异步获取组件，真实情况，甚至可以通过ajax请求组件编译之后的template，然后调用 resolve 方法；如果加载失败，可以调用 reject 方法

大部分情况下，我们的组件都是单独分割成一个 .vue 文件，那么我们可以这么做：

    Vue.component('async-webpack-example', function (resolve) {
        require(['./my-async-component'], resolve)
    })

这个特殊的 require 语法将会告诉 webpack，自动将你的构建代码切割成多个包，这些包会通过 Ajax 请求加载

那么如果你的页面没有用到这个组件，自然就不会请求组件的js包

当然，也可以局部注册异步组件

    new Vue({
    // ...
        components: {
            'my-component': () => import('./my-async-component')
        }
    })

动态组件

说到异步组件，很多人就会想到另一个类似的 动态组件，并且总是会弄混两者的关系。

其实 动态组件 和 异步组件 完全不是一码事！！！

直接上总结

动态组件：是Vue中一个特殊的Html元素：<component>，它拥有一个特殊的 is 属性，属性值可以是 已注册组件的名称 或 一个组件的选项对象，它是用于不同组件之间进行动态切换的。

异步组件rrreee

Auf diese Weise wird MyComponent während des Erstellungsprozesses synchron in das Bundle der Seite eingegeben. In einigen Szenarien, wie zum Beispiel:

1. Die Größe dieser Komponente ist sehr groß. 2. Sie wird nicht vom Anfang der Seite benötigt Es ist unangemessen, den Komponentencode in die Seite js einzugeben code>setTimeout, um die asynchrone Erfassung von Komponenten zu simulieren. In der realen Situation können Sie die Vorlage sogar nach der Komponentenkompilierung über Ajax anfordern und dann die Methode resolve aufrufen , können Sie die Methode reject aufrufenIn den meisten Fällen werden unsere Komponenten in eine .vue-Datei aufgeteilt, dann können wir Folgendes tun:

rrreee🎜 Dieser spezielle require-Syntax weist Webpack an, Ihren Build-Code automatisch in mehrere Pakete zu unterteilen. Diese Pakete werden über Ajax-Anfragen geladen. Wenn Ihre Seite diese Komponente also nicht verwendet, wird das js-Paket natürlich nicht angefordert Komponente🎜🎜Natürlich können Sie die asynchrone Komponente auch lokal registrieren🎜rrreee🎜🎜Dynamische Komponente🎜🎜🎜Apropos asynchrone Komponente: Viele Leute werden an eine andere ähnliche dynamische Komponente denken und die Beziehung immer verwechseln zwischen den beiden. 🎜🎜Tatsächlich sind dynamische Komponenten und asynchrone Komponenten völlig unterschiedlich! ! ! 🎜🎜🎜Gehen Sie direkt zur Zusammenfassung🎜🎜🎜Dynamische Komponente: Es handelt sich um ein spezielles HTML-Element in Vue: <component>, das einen speziellen ist -Attribut, der Attributwert kann Der Name einer registrierten Komponente oder Das Optionsobjekt einer Komponente sein, das für den dynamischen Wechsel zwischen verschiedenen Komponenten verwendet wird. 🎜🎜Asynchrone Komponente: Einfach ausgedrückt handelt es sich um ein Konzept, eine Möglichkeit, Komponenten asynchron zu laden. Es wird im Allgemeinen zur Leistungsoptimierung verwendet, z. B. zur Reduzierung der Ladezeit des ersten Bildschirms und der Laderessourcengröße. 🎜🎜 (Lernvideo-Sharing: 🎜Erste Schritte mit dem Web-Frontend🎜, 🎜vue-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen asynchronen Komponenten und dynamischen Komponenten in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!