Quelle est la différence entre la composantisation et la modularisation dans Vue

La différence entre la modularisation et la modularisation : la modularisation est divisée du point de vue de la logique du code ; elle facilite le développement en couches de code et garantit la cohérence des fonctions de chaque module fonctionnel. La composantisation est planifiée du point de vue de l'interface utilisateur ; la composantisation du frontal facilite la réutilisation des composants de l'interface utilisateur.

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

L'origine de la modularité

Au début du développement Web, js était utilisé comme langage de script pour effectuer une simple vérification de formulaire ou une implémentation d'animation. La quantité de code était relativement faible et il suffisait de l'écrire. dans la balise de script

Avec l'émergence des requêtes asynchrones Ajax, la séparation front-end et back-end s'est progressivement formée. Le client doit effectuer de plus en plus de choses et la quantité de code augmente également. Afin de faire face à l'augmentation spectaculaire de la quantité de code, nous organisons généralement le code dans plusieurs fichiers js pour la maintenance

Mais il y aura quelques problèmes : comme le problème des variables globales du même nom

Utilisation des fermetures de fonctions peut résoudre le problème des conflits de variables. Mais les variables définies dans d'autres fichiers ne peuvent pas être utilisées

La modularisation a deux noyaux : l'exportation et l'importation

Apprenons le développement modulaire es6

Mots clés export (export) import (import)

Par exemple, encapsuler un module qui envoie ajax

Dans certains cas, un module contient une certaine fonction. Nous ne voulons pas nommer cette fonction par lui-même

Vous pouvez utiliser l'exportation. default

export default address
//只能默认一个

import jjj from "./aaa.js"
//可以自己命名，不要加{}

//导入 import

Pourquoi utiliser la modularité ? Les avantages de l'utilisation de la modularité

Bien sûr, toutes les fonctions de la page peuvent être réalisées sans utiliser le développement modulaire, mais cela augmentera la pression sur les requêtes du serveur et réduira l'expérience utilisateur. Lorsque la page nécessite trop de données, une. la demande inclura toutes les données demandées, que se passe-t-il si l'utilisateur n'en a pas besoin ? Une telle demande est-elle toujours efficace ? Bien sûr, cela n'a aucun effet, donc ce genre de problème peut être résolu en utilisant l'idée du développement modulaire

Parlez simplement des avantages de l'utilisation du développement modulaire

1. Organisation claire et maintenance facile

2. Je ne peux pas tout faire en même temps. Toutes les demandes de données sont renvoyées et l'expérience utilisateur est bonne

3. Les modules sont isolés les uns des autres, mais les membres internes peuvent être exposés via des interfaces spécifiques, ou ils peuvent s'appuyer sur d'autres modules

. Comparaison entre la composantisation et la modularisation

Beaucoup de gens comprennent la composantisation et la modularisation comme une seule et même chose. Bien sûr, elles sont similaires à de nombreux endroits. Jetons un coup d'œil aux similitudes ci-dessous !

1. La composantisation est une unité d'organisation de code indépendante et réutilisable. Le système de composants est l'une des fonctionnalités principales de Vue, qui permet aux développeurs de créer de grandes applications à l'aide de petits composants indépendants et souvent réutilisables [Recommandations associées : tutoriel d'introduction à Vuejs, front-end web]

2. -développement basé sur Il peut grandement améliorer l'efficacité du développement des applications, la testabilité, la réutilisabilité, etc. ;

3. L'utilisation des composants est classée en : composants de page, composants métier, composants généraux

4. write Les composants sont des configurations de composants plutôt que des composants. Le framework générera ses constructeurs plus tard. Ils sont basés sur VueComponent et étendent Vue ; principalement utilisé pour la communication, l'expansion, etc. ;

6. Une division raisonnable des composants peut aider à améliorer les performances de l'application ;

7 Les composants doivent être hautement cohérents et à faible couplage ; couler.

La différence entre la composantisation et la modularisation :

Modularisation : elle est divisée du point de vue de la logique du code ; elle facilite le développement hiérarchique du code et garantit que chaque module fonctionnel a une seule fonction

Componentisation : oui Diviser du point de vue de l'interface utilisateur, et composant le front-end pour faciliter la réutilisation des composants de l'interface utilisateur

Trois façons de définir des composants globauxLa première façon

 <div id="app">
        <!-- 如果要使用组件，直接把组件的名称，以HTML标签形式，引入到页面中即可 -->
    <mycom1></mycom1>
    </div>

<script>
        var com1 = Vue.extend({
        template:&#39;<h3 id="使用Vue-extend-nbsp-来创建全局的Vue组件">使用Vue.extend 来创建全局的Vue组件</h3>&#39;
        })
        //1,使用Vue.component(&#39;组件名&#39;，创建出来的组件模板对象)
        Vue.component(&#39;mycom1&#39;,com1)
 </script>

La deuxième façon

<script>
Vue.component(&#39;mycom2&#39;,{template:&#39;<div><h3 id="使用Vue-component-nbsp-创建出来的组件">使用Vue.component 创建出来的组件</h3>s<span>template</span></div>&#39;
        })
</script>

La troisième way Kind of

<templat id="temp">
 <div>
   <h1 id="通过templat元素-在外部定义的组件结构-这个方式-有代码的智能提示和高亮">通过templat元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
   <h4 id="好用-不错">好用，不错</h4>
  </div>
</templat>

<script>
 Vue.component(&#39;mycom2&#39;,{
            template:&#39;temp&#39;
        })
</script>

Remarque : quelle que soit la manière dont le composant est créé, le contenu du modèle pointé par l'attribut de modèle du composant doit avoir et ne peut avoir qu'un et un seul élément racine.

La troisième méthode est mieux utilisée dans le développement de projets de travail

[Recommandations associées :

Tutoriel vidéo vuejs

]

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!