Quelle est la différence entre les composants asynchrones et les composants dynamiques dans Vue

Différence : 1. Le composant dynamique est un élément HTML spécial "<component>" dans Vue. Il a un attribut is spécial. La valeur de l'attribut peut être "le nom d'un composant enregistré" ou "un objet d'option d'un composant. " ; Les composants asynchrones ne sont pas des objets physiques, mais un concept, un moyen de charger des composants de manière asynchrone. 2. Les composants dynamiques sont utilisés pour la commutation dynamique entre différents composants ; les composants asynchrones sont utilisés pour l'optimisation des performances, comme la réduction du temps de chargement du premier écran et de la taille des ressources de chargement. <component>

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Composants asynchrones

Dans certaines applications Vue à grande échelle, que ce soit pour l'extraction de code ou la division logique, l'application sera inévitablement divisée en quelques petits blocs de code, formant des composants dans notre conscience, importer code> peut être introduit si nécessaire, par exemple : <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

Introduit de cette manière, MyComponent sera synchronisé dans le bundle de la page pendant le processus de construction .js

À ce moment-là, dans. certains scénarios, tels que : 1. La taille de ce composant est très grande

🎜🎜🎜2 Il n'est pas nécessaire dès le début de la page🎜🎜🎜 Alors nous sommes en train de construire, c'est évidemment inapproprié. pour saisir le code du composant dans la page js🎜🎜Vue fournit un concept de composants asynchrones : chargés uniquement depuis le serveur en cas de besoin🎜🎜Nous pouvons le faire Définition : 🎜rrreee🎜L'exemple ci-dessus utilise setTimeout pour simuler l'acquisition asynchrone de composants. Dans la situation réelle, vous pouvez même demander le modèle après la compilation du composant via ajax, puis appeler la méthode resolve si le chargement échoue, vous pouvez appeler la méthode reject🎜🎜Dans la plupart des cas, nos composants sont séparés dans un fichier .vue, nous pouvons alors faire ceci :🎜rrreee🎜 Ce spécial La syntaxe require indiquera à Webpack de couper automatiquement votre code de build en plusieurs packages. Ces packages seront chargés via des requêtes Ajax🎜🎜Donc, si votre page n'utilise pas ce composant, elle ne demandera naturellement pas le package js du composant. 🎜🎜Bien sûr, vous pouvez également enregistrer le composant asynchrone localement🎜rrreee🎜🎜Composant dynamique🎜🎜🎜En parlant de composants asynchrones, beaucoup de gens penseront à un autre composant dynamique similaire et confondront toujours la relation entre les deux. 🎜🎜En fait, les composants dynamiques et les composants asynchrones sont complètement différents ! ! ! 🎜🎜🎜Allez directement au résumé🎜🎜🎜Composant dynamique : Il s'agit d'un élément Html spécial dans Vue : <component>, qui a un est spécial , la valeur de l'attribut peut être Le nom d'un composant enregistré ou L'objet option d'un composant, qui est utilisé pour la commutation dynamique entre différents composants. 🎜🎜Composant asynchrone : en termes simples, c'est un concept, un moyen de charger des composants de manière asynchrone ; il est généralement utilisé pour l'optimisation des performances, comme la réduction du temps de chargement du premier écran et la taille des ressources de chargement. 🎜🎜 (Partage de vidéos d'apprentissage : 🎜Démarrer avec le front-end Web🎜, 🎜Tutoriel vidéo Vue🎜)🎜

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!