Eine kurze Diskussion darüber, was Vue.use ist?

Was genau ist Vue.use? In diesem Artikel stellen wir Ihnen Vue.use vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Wenn wir Vue für die Projektentwicklung verwenden, sehen wir, dass viele Räder über Vue.use verwendet werden, was sich sehr fortschrittlich anfühlt. Vue.use来进行使用，感觉甚是高大上。

不过Vue.use到底是什么鬼？不妨来看个究竟。

其实这些轮子都可以称之为插件，它的功能范围没有严格的限制，一般包含如下几种：

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

无论大小，插件要实现的功能无非就是上述这几种。但是，这并不妨碍我们创造出复杂的插件，不过我们还是希望给用户提供一个简单的使用方法，他不需要关注插件内部做了些什么。固Vue提供了use方法，专门来在new Vue()之前使用插件。

不管是官方提供的插件（例如vue-router、vuex），还是第三方的插件（例如ElementUI、ant）都是采用了此方式，不外乎插件内部的功能不同而已。当然，还有其他诸多此类插件，awesome-vue 就集合了大量由社区贡献的插件和库。

接下来，我们就来看下这个神秘的use方法是如何实现的。

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，用于传入插件的配置：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
  // 5. 注册全局组件
  Vue.component('myButton',{
    // ...组件选项
  })
}

Vue.use(MyPlugin,{
  // ...options
})

一个插件内部大概就是如上所示，其实也不外乎上述那几种东西，甚是简单。接下来我们就来看下真实的案例ElementUI:

const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);
  // 注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component);
  });
  Vue.use(InfiniteScroll);
  Vue.use(Loading.directive);
  // 添加实例方法
  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };
  // 添加实例方法
  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  version: '2.13.0',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  // ...other components
};

我们不难发现，其实自己来实现一个插件也是超级简单，只要对外暴露一个install方法即可，在使用Vue.use的时候，会调用这个方法。所以我们只要将要实现的内容放到install内部即可。这样的好处就是插件需要一开始调用的方法都封装在install里面，更加精简和可拓展性更高。

大家可能也有注意到，这里的install其实是将所有的组件全部引入了。作为一个庞大的插件库，这样可能会有一些性能问题。用过的ElementUI的同学都知道，它是支持按需引入的，其实在上面的示例中也可以发现一些蛛丝马迹。

const components = [ Pagination, Dialog, Autocomplete/* 此处由于篇幅省略若干个组件 */];
// ....省去中间内容
export default {
  version: '2.13.0',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  // ...other components
};

这里将每个组件都单独都导出了，而在每个组件内部，也类似的暴露了install来组件每个组件，这样就可以单独Vue.use每个组件，从而实现按需引入的目的。

import Alert from './src/main';
/* istanbul ignore next */
Alert.install = function(Vue) {
  Vue.component(Alert.name, Alert);
};
export default Alert;

除了上述内容之外，还有几点值得我们注意一下：

• 插件传入的如果是一个对象，则执行其install方法，如果是一个函数，则执行它自身，并bind this为null，然后传入额外的参数

if (typeof plugin.install === 'function') {
  plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
  plugin.apply(null, args);
}

• 如果插件没有被注册过，那么注册成功之后会给插件添加一个installed的属性，其值为true。Vue.use方法内部会检测插件的installed属性，从而避免重复注册插件

Vue.use

Aber was zum Teufel ist Vue.use? Werfen wir einen Blick darauf, was passiert.

Tatsächlich können diese Räder als Plug-Ins bezeichnet werden und ihr Funktionsumfang ist nicht streng eingeschränkt. Sie umfassen im Allgemeinen die folgenden Typen:

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

Egal wie groß oder klein, die Funktionen, die Plug-Ins erreichen müssen, sind nichts weiter als die oben genannten. Dies hindert uns jedoch nicht daran, komplexe Plug-Ins zu erstellen. Wir hoffen jedoch, den Benutzern eine einfache Verwendungsmethode zu bieten, ohne dass sie darauf achten müssen, was im Plug-In geschieht. Vue bietet eine Verwendungsmethode speziell für die Verwendung von Plug-Ins vor new Vue().

Ob es sich um ein offiziell bereitgestelltes Plug-in (wie vue-router, vuex) oder ein Drittanbieter-Plug-in (wie ElementUI, <code> ant) übernehmen alle diese Methode, aber die Funktionen innerhalb des Plug-Ins sind unterschiedlich. Natürlich gibt es noch viele andere solcher Plug-ins, awesome- vue Es ​​verfügt über eine große Sammlung von Plugins und Bibliotheken, die von der Community bereitgestellt wurden.

Als nächstes werfen wir einen Blick darauf, wie diese mysteriöse use-Methode implementiert wird. Das Vue.js-Plugin sollte eine install-Methode verfügbar machen. Der erste Parameter dieser Methode ist der Vue-Konstruktor und der zweite Parameter ist ein optionales Optionsobjekt, das zur Übergabe der Plug-In-Konfiguration verwendet wird:

rrreeerrreee

Das Innere eines Plug-Ins ist wahrscheinlich wie folgt Wie oben gezeigt, handelt es sich tatsächlich um nichts weiter als die oben genannten Dinge, sehr einfach. Schauen wir uns als Nächstes einen realen Fall von ElementUI an:

rrreeeEs ist nicht schwer festzustellen, dass es tatsächlich super einfach ist, ein Plug-in selbst zu implementieren, solange Sie eine Installation verfügbar machen -Methode nach außen Das ist es. Diese Methode wird aufgerufen, wenn Vue.use verwendet wird. Wir müssen also nur den zu implementierenden Inhalt in install einfügen. Dies hat den Vorteil, dass die Methoden, die das Plug-in zu Beginn aufrufen muss, in install gekapselt sind, was schlanker und skalierbarer ist.
Vielleicht fällt Ihnen auch auf, dass install hier tatsächlich alle Komponenten einführt. Da es sich um eine große Plug-in-Bibliothek handelt, kann es zu Leistungsproblemen kommen. Schüler, die ElementUI verwendet haben, wissen, dass es die On-Demand-Einführung unterstützt. Tatsächlich können einige Hinweise im obigen Beispiel gefunden werden.

rrreee🎜Hier wird jede Komponente separat exportiert, und innerhalb jeder Komponente wird install auf ähnliche Weise bereitgestellt, um jede Komponente zusammenzubauen, sodass Sie jede Komponente separat Vue.use können können auf Anfrage eingeführt. 🎜rrreee🎜Darüber hinaus gibt es ein paar Punkte, die es zu beachten gilt: 🎜

• Wenn das Plug-in ein Objekt übergibt, wird dessen Methode install ausgeführt. Wenn es sich um eine Funktion handelt, führen Sie sie selbst aus, setzen Sie bind this auf null und übergeben Sie dann zusätzliche Parameter

rrreee

Wenn das Plug-in nicht registriert wurde, wird nach erfolgreicher Registrierung dem Plug-in ein installed-Attribut mit dem Wert true. Die Methode <code>Vue.use erkennt intern das Attribut installed des Plug-ins, um eine wiederholte Registrierung des Plug-ins

🎜Vue.use Tatsächlich ist es nicht mysteriös. Der Innenraum besteht immer noch aus den gleichen Dingen, die wir normalerweise verwenden, aber er ist nur mit einem hochwertigen Mantel bedeckt. Wir können auch versuchen, diese Methode während der Entwicklung zu verwenden, was nicht nur einfach, sondern auch leistungsstark ist. 🔜 Besuchen Sie: 🎜Einführung in die Programmierung🎜! ! 🎜🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, was Vue.use ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!