Analysons brièvement les plug-ins et les composants de Vue et parlons de leurs différences !

Que sont les composants ? Qu'est-ce qu'un plug-in ? L'article suivant vous amènera à comprendre les plug-ins et les composants dans Vue, et à parler des différences entre les plug-ins et les composants. J'espère qu'il sera utile à tout le monde !

1. Qu'est-ce qu'un composant ?

Rappelez-vous la définition précédente des composants :

Les composants sont un modèle de développement qui résume diverses logiques graphiques et non graphiques en un concept unifié (composant). Le fichier >.vue dans Vue peut être considéré comme un composant. (Partage de vidéos d'apprentissage : vue vidéo tutorielVue中每一个.vue文件都可以视为一个组件。（学习视频分享：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', { /* ... */ })

1

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

const component1 = {...} // 定义一个组件

export default {
	components:{
		component1   // 局部注册
	}
}

插件注册

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

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

注意的是：

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

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

使用场景

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

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

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

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

Avantages du composant

• Réduisez le couplage de l'ensemble du système. Tout en gardant l'interface inchangée, nous pouvons remplacer différents composants pour répondre rapidement aux exigences. Par exemple, la zone de saisie peut être remplacée par le calendrier, l'heure, la plage et d'autres composants. à des fins spécifiques. L'implémentation
• Il est facile à déboguer Étant donné que l'ensemble du système est composé de composants, lorsqu'un problème survient, vous pouvez utiliser la méthode de dépannage pour supprimer directement le composant ou localiser rapidement le problème. basé sur le composant qui a signalé l'erreur. La raison pour laquelle le positionnement peut être rapide est que chaque composant a un faible couplage et une responsabilité unique, donc la logique est plus simple que d'analyser l'ensemble du système.
• Amélioration de la maintenabilité, car chacun Le composant a une seule responsabilité et le composant est dans le système est réutilisé, donc l'optimisation du code peut permettre 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 que Vue ajoute des fonctionnalités globales. 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 et fournit 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 est principalement. reflété dans les aspects suivants Aspects : 🎜

• Formulaire de rédaction
• 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 vueDans ce format de fichier unique, chaque fichier .vue peut être considéré comme un composant🎜🎜vue format standard de fichier🎜rrreee🎜On peut aussi passer Attribut template pour écrire un composant. Si le composant a beaucoup de contenu, nous pouvons définir le contenu du composant template en externe. Si le composant n'a pas beaucoup de contenu, nous pouvons le faire. écrivez-le directement dans template 🎜rrreee<h4 data-id="heading-5">🎜Ecrire un plug-in🎜</h4>🎜L'implémentation du <code>vue doit exposer une méthode <code>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🎜 h3>🎜Enregistrement des composants🎜🎜vueL'enregistrement des composants est principalement divisé en enregistrement global et enregistrement local🎜🎜Enregistrement global via Vue .component , le premier paramètre est le nom du composant et le deuxième paramètre est l'élément de configuration entrant🎜rrreee🎜1🎜🎜L'enregistrement local ne doit être effectué que via composantslorsqu'il est utilisé >Attribut enregistrement d'un composant🎜rrreee

🎜Enregistrement du plug-in🎜

🎜L'enregistrement du plug-in est enregistré via Vue.use() (installation ), 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 :🎜🎜Lors de l'enregistrement du plug-in, vous devez appeler new Vue() code> pour le démarrer Terminé avant l'application🎜🎜<code>Vue.use empêchera automatiquement plusieurs enregistrements du même plug-in et ne l'enregistrera qu'une seule fois🎜

🎜scénarios d'utilisation🎜

🎜 Les détails sont en fait expliqués dans le chapitre sur ce qu'est un plug-in. Voici un résumé🎜🎜Le composant (Component) est utilisé pour former le module métier. de votre App Son objectif Oui App.vue🎜🎜Plug-in (Plugin) est un module fonctionnel utilisé pour enrichir votre stack technologique. Son objectif est Vue lui-même🎜 🎜En termes simples, les plug-ins font référence à des améliorations ou des suppléments aux fonctions de Vue🎜🎜 (Partage de vidéos d'apprentissage : 🎜développement web front-end 🎜, 🎜Vidéo de programmation de base🎜)🎜

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!