Quelle est la différence entre les plug-ins et les composants dans vue

Différences : 1. L'enregistrement des composants se fait via l'attribut "Vue.component" ou "components", tandis que les plug-ins se font via "Vue.use()" ; 2. Les composants sont utilisés pour constituer le module métier de l'application, et son objectif est "App. vue", et les plug-ins sont des modules fonctionnels utilisés pour améliorer la pile technologique, et leur cible est Vue elle-même.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

1. Qu'est-ce qu'un composant

Rappelez-vous la définition précédente d'un composant :

Un composant est un modèle de développement qui résume diverses logiques graphiques et non graphiques en un concept unifié (composant). code>.vue dans peut être considéré comme un composantVue中每一个.vue文件都可以视为一个组件

组件的优势

• 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现

• 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单

• 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

二、插件是什么

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

• 添加全局方法或者属性。如: vue-custom-element
• 添加全局资源：指令/过滤器/过渡等。如 vue-touch
• 通过全局混入来添加一些组件选项。如vue-router
• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router

三、两者的区别

两者的区别主要表现在以下几个方面：

• 编写形式
• 注册形式
• 使用场景

编写形式

编写组件

编写一个组件，可以有很多方式，我们最常见的就是vue单文件的这种格式，每一个.vue文件我们都可以看成是一个组件

vue文件标准格式

<template>
</template>
<script>
export default{ 
    ...
}
</script>
<style>
</style>

我们还可以通过template属性来编写一个组件，如果组件内容多，我们可以在外部定义template组件内容，如果组件内容并不多，我们可直接写在template属性上

<template id="testComponent">     // 组件显示的内容
    <div>component!</div>   
</template>

Vue.component(&#39;componentA&#39;,{ 
    template: &#39;#testComponent&#39;  
    template: `<div>component</div>`  // 组件内容少可以通过这种形式
})

编写插件

vue插件的实现应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

MyPlugin.install = function (Vue, options) {
  // 1\. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2\. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3\. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4\. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

注册形式

组件注册

vue组件注册主要分为全局注册与局部注册

全局注册通过Vue.component方法，第一个参数为组件的名称，第二个参数为传入的配置项

Vue.component('my-component-name', { /* ... */ })

局部注册只需在用到的地方通过components属性注册一个组件

const component1 = {...} // 定义一个组件export default {
    components:{
        component1   // 局部注册
    }}

插件注册

插件的注册通过Vue.use()的方式进行注册（安装），第一个参数为插件的名字，第二个参数是可选择的配置项

Vue.use(插件名字,{ /* ... */} )

注意的是：

注册插件的时候，需要在调用 new Vue() 启动应用之前完成

Vue.use会自动阻止多次注册相同插件，只会注册一次

使用场景

具体的其实在插件是什么章节已经表述了，这里在总结一下

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue

插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身

简单来说，插件就是指对Vue

Avantages des composants

• Réduire le couplage de l'ensemble du système tout en gardant l'interface inchangée Ensuite, nous pouvons remplacer différents composants pour répondre rapidement aux exigences. Par exemple, la zone de saisie peut être remplacée par des composants tels que le calendrier, l'heure, la plage, etc. pour une implémentation spécifique
• Le débogage est facile, car l'ensemble du système est combiné via des composants Oui, lorsqu'un problème survient, vous pouvez utiliser la méthode d'élimination pour supprimer directement le composant ou localiser rapidement le problème en fonction du composant qui a signalé l'erreur. La raison pour laquelle le problème peut être rapidement localisé est que chaque composant a. faible couplage et responsabilité unique, donc la logique est meilleure que l'analyse. L'ensemble du système doit être simple🎜
• 🎜Améliorez la maintenabilité puisque chaque composant a une seule responsabilité et que les composants sont réutilisés dans le système, optimisant ainsi le code. peut réaliser une mise à niveau globale du système🎜

🎜2 Qu'est-ce qu'un plug-in ? Les plug-ins sont généralement utilisés pour ajouter des fonctions globales à Vue. Il n'y a pas de restrictions strictes sur la portée fonctionnelle des plug-ins - il existe généralement les types suivants : 🎜

• Ajouter des méthodes ou des propriétés globales. Par exemple : vue-custom-element
• Ajouter des ressources globales : instructions/filtres/transitions, etc. Par exemple, vue-touch
• ajoute quelques options de composants via un mixage global. Par exemple, vue-router
• ajoute des méthodes d'instance Vue en les ajoutant à Vue.prototype.
• Une bibliothèque qui fournit sa propre API tout en fournissant une ou plusieurs des fonctions mentionnées ci-dessus. Tel que vue-router

🎜3 La différence entre les deux🎜🎜La différence entre les deux se reflète principalement dans les aspects suivants :🎜

• Formulaire d'écriture
• Formulaire d'inscription
• Scénarios d'utilisation

Formulaire d'écriture

🎜Composant d'écriture 🎜🎜Il existe de nombreuses façons d'écrire un composant. La plus courante est le format de fichier unique vue. Nous pouvons considérer chaque fichier .vue comme un A. composant🎜🎜format standard de fichier vue🎜rrreee🎜Nous pouvons également écrire un composant via l'attribut template Si le composant a beaucoup de contenu, nous pouvons définir . modèle en externe Contenu du composant, si le contenu du composant n'est pas grand-chose, nous pouvons l'écrire directement sur l'attribut template🎜rrreee🎜Plug-in d'écriture🎜🎜vueLes implémentations de plug-in doivent exposer une méthode install. Le premier paramètre de cette méthode est le constructeur Vue, et le deuxième paramètre est un objet d'options facultatif🎜rrreee

Formulaire d'inscription

🎜Composant enregistrement🎜🎜vueL'enregistrement des composants est principalement divisé en enregistrement global et enregistrement local🎜🎜Enregistrement global via la méthode Vue.component, le premier paramètre est le nom du composant, le deuxième paramètre est l'élément de configuration entrant🎜rrreee🎜L'enregistrement partiel ne nécessite que l'enregistrement d'un composant via l'attribut components où il est utilisé🎜rrreee🎜Enregistrement du plug-in strong >🎜🎜L'enregistrement des plug-ins se fait via Vue.use() Le premier paramètre est le nom du plug-in et le deuxième paramètre est l'élément de configuration facultatif🎜rrreee🎜Remarque. Ce qui est important est : 🎜🎜Lors de l'enregistrement d'un plug-in, il doit être terminé avant d'appeler new Vue() pour démarrer l'application🎜🎜Vue.use empêchera automatiquement plusieurs enregistrements du même plug-in, un seul enregistrement 🎜

Scénarios d'utilisation

🎜Les détails sont déjà expliqués dans le chapitre sur ce qu'est le plug-in. Voici un. résumé🎜🎜Component (Component) Il est utilisé pour former le module métier de votre App Sa cible est App.vue🎜🎜Plug-. dans (Plugin) est utilisé pour améliorer votre Le module fonctionnel de la pile technologique, son objectif est Vue lui-même🎜🎜En termes simples, les plug-ins font référence à l'amélioration ou au supplément des fonctions de Vue🎜🎜[Recommandations associées : "🎜Tutoriel vue.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!