Was ist der Unterschied zwischen Plug-Ins und Komponenten in Vue?

Unterschiede: 1. Die Komponentenregistrierung erfolgt über das Attribut „Vue.component“ oder „components“, während Plug-ins über „Vue.use()“ erfolgen. 2. Komponenten werden verwendet, um das Geschäftsmodul der App zu bilden. und sein Ziel ist „App. vue“, und Plug-Ins sind Funktionsmodule, die zur Erweiterung des Technologie-Stacks verwendet werden, und ihr Ziel ist Vue selbst.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

1. Was ist eine Komponente? Erinnern Sie sich an die vorherige Definition einer Komponente:

Eine Komponente ist ein Entwicklungsmodell, das verschiedene grafische und nichtgrafische Logiken in einem einheitlichen Konzept (Komponente) abstrahiert code>.vue-Datei in kann als Komponente betrachtet werden

Vorteile von KomponentenVue中每一个.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

• Reduzieren Sie die Kopplung des gesamten Systems, während die Schnittstelle unverändert bleibt. Als nächstes können wir ersetzen Verschiedene Komponenten, um die Anforderungen schnell zu erfüllen. Beispielsweise kann das Eingabefeld durch Kalender, Zeit, Bereich und andere Komponenten zur spezifischen Implementierung ersetzt werden.

• Das Debuggen ist einfach, da das gesamte System durch Komponenten kombiniert wird Ja, wenn ein Problem auftritt, können Sie die Eliminierungsmethode verwenden, um die Komponente direkt zu entfernen, oder das Problem schnell anhand der Komponente lokalisieren, die den Fehler gemeldet hat. Der Grund, warum das Problem schnell lokalisiert werden kann, liegt darin, dass jede Komponente eine geringe Kopplung aufweist Einzelverantwortung, daher ist die Logik besser als die Analyse. Das gesamte System sollte einfach sein Gesamtaktualisierung des Systems

2. Was ist ein Plug-in, das normalerweise zum Hinzufügen globaler Funktionen zu Vue verwendet wird? Es gibt keine strengen Einschränkungen hinsichtlich des Funktionsumfangs von Plug-Ins – im Allgemeinen gibt es folgende Typen: 🎜

• Globale Methoden oder Eigenschaften hinzufügen. Zum Beispiel: vue-custom-element
• Globale Ressourcen hinzufügen: Anweisungen/Filter/Übergänge usw. Beispielsweise fügt vue-touch
• einige Komponentenoptionen durch globales Mischen hinzu. Beispielsweise fügt vue-router
• Vue-Instanzmethoden hinzu, indem es sie zu Vue.prototype hinzufügt.
• Eine Bibliothek, die ihre eigene API bereitstellt und gleichzeitig eine oder mehrere der oben genannten Funktionen bereitstellt. Wie vue-router

🎜3 Der Unterschied zwischen den beiden🎜🎜Der Unterschied zwischen den beiden spiegelt sich hauptsächlich in den folgenden Aspekten wider:🎜

• Schreibformular
• Anmeldeformular
• Nutzungsszenarien

Schreibformular

🎜Schreibkomponente 🎜🎜Es gibt viele Möglichkeiten, eine Komponente zu schreiben. Die gebräuchlichste ist das Format einer einzelnen vue-Datei. Wir können jede .vue-Datei als A betrachten Komponente🎜🎜vue Dateistandardformat🎜rrreee🎜Wir können eine Komponente auch über das Attribut template schreiben. Wenn die Komponente viel Inhalt hat, können wir definieren Vorlage extern Komponenteninhalt. Wenn der Komponenteninhalt nicht groß ist, können wir ihn direkt in das Attribut template schreiben🎜rrreee🎜Plug-in schreiben🎜🎜vuePlug-in-Implementierungen sollten eine install-Methode verfügbar machen. Der erste Parameter dieser Methode ist der Vue-Konstruktor und der zweite Parameter ist ein optionales Optionsobjekt🎜rrreee

Registrierungsformular

🎜Komponente Registrierung🎜🎜vueDie Komponentenregistrierung ist hauptsächlich in globale Registrierung und lokale Registrierung unterteilt🎜🎜Globale Registrierung über die Vue.component-Methode, der erste Parameter ist Der Name Der zweite Parameter der Komponente ist das eingehende Konfigurationselement🎜rrreee🎜Bei der Teilregistrierung muss eine Komponente nur über das Attribut components registriert werden, wo sie verwendet wird🎜rrreee🎜Plug-in-Registrierung stark >🎜🎜Die Registrierung von Plug-Ins erfolgt über Vue.use(). Der erste Parameter ist der Name des Plug-Ins und der zweite Parameter ist das optionale Konfigurationselement🎜rrreee🎜Hinweis Wichtig ist: 🎜🎜Bei der Registrierung eines Plug-Ins muss diese abgeschlossen sein, bevor new Vue() aufgerufen wird, um die Anwendung zu starten. 🎜🎜Vue.use verhindert dies automatisch Mehrere Registrierungen desselben Plug-Ins werden nur einmal registriert. 🎜

Nutzungsszenarien

🎜Die Einzelheiten werden bereits im Kapitel über das Plug-In erläutert. Hier ist ein Zusammenfassung🎜🎜Komponente (Komponente) Es wird verwendet, um das Geschäftsmodul Ihrer App zu bilden. Sein Ziel ist App.vue🎜🎜Plug-. in (Plugin) wird verwendet, um Ihr Funktionsmodul des Technologie-Stacks zu erweitern, sein Ziel ist Vue selbst🎜🎜Einfach ausgedrückt beziehen sich Plug-Ins auf die Erweiterung oder Ergänzung der Funktionen von Vue🎜🎜[Verwandte Empfehlungen: „🎜vue.js Tutorial🎜“】🎜

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