Une brève discussion sur ce qu'est Vue.use ?

Qu'est-ce que Vue.use ? Cet article vous présentera Vue.use. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Lorsque nous utilisons Vue pour le développement de projets, nous constatons que de nombreuses roues sont utilisées via Vue.use, ce qui semble très avancé.

Mais Vue.usequ'est-ce que c'est ? Jetons un coup d'oeil et voyons ce qui se passe.

En fait, ces roues peuvent être appelées plug-ins, et leur portée fonctionnelle n'est pas strictement limitée. Elles incluent généralement les types suivants :

1. Ajouter des méthodes ou des attributs globaux. Par exemple : vue-custom-element
2. Ajouter des ressources globales : directives/filtres/transitions/composants, etc. Par exemple, vue-touch
3. ajoute certaines options de composants via des mixins globaux. Par exemple, vue-router
4. ajoute des méthodes d'instance Vue en les ajoutant à Vue.prototype.
5. Une bibliothèque qui fournit sa propre API tout en fournissant une ou plusieurs des fonctionnalités mentionnées ci-dessus. Tels que vue-router

Peu importe leur taille, les fonctions que le plug-in souhaite réaliser ne sont rien de plus que ce qui précède. Cependant, cela ne nous empêche pas de créer des plug-ins complexes, mais nous espérons toujours fournir à l'utilisateur une méthode d'utilisation simple, et il n'a pas besoin de prêter attention à ce qui se fait à l'intérieur du plug-in. Vue fournit une méthode d'utilisation spécifiquement pour utiliser les plug-ins avant new Vue().

Qu'il s'agisse d'un plug-in officiellement fourni (tel que vue-router, vuex) ou d'un plug-in tiers (tel que ElementUI, ant), cette méthode est adoptée . Les fonctions sont simplement différentes. Bien sûr, il existe de nombreux autres plugins de ce type, et awesome-vue possède une large collection de plugins et de bibliothèques contribués par la communauté.

Ensuite, regardons comment cette mystérieuse méthode use est mise en œuvre. Les plugins pour

Vue.js devraient 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 utilisé pour transmettre la configuration du plug-in :

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',{
    // ...组件选项
  })
}

rrree

L'intérieur d'un plug-in est probablement comme indiqué ci-dessus, En fait, ce n'est rien de plus que les choses mentionnées ci-dessus, très simples. Ensuite, jetons un coup d'œil à un cas réelElementUI :

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

Il n'est pas difficile de constater qu'il est en fait très simple d'implémenter un plug-in vous-même. Il vous suffit d'exposer une méthode install à. le monde extérieur. Lors de l'utilisation de Vue.use, cette méthode sera appelée. Il nous suffit donc de mettre le contenu que nous souhaitons implémenter à l'intérieur de install. L'avantage est que les méthodes que le plug-in doit appeler au début sont encapsulées dans install, qui est plus simple et plus évolutif.

Vous remarquerez peut-être également que install présente ici tous les composants. En tant que grande bibliothèque de plug-ins, cela peut présenter des problèmes de performances. Les étudiants qui ont utilisé ElementUI savent qu'il prend en charge l'introduction à la demande. En fait, quelques indices peuvent être trouvés dans l'exemple ci-dessus.

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
};

Ici, chaque composant est exporté séparément, et à l'intérieur de chaque composant, il est exposé de la même manièreinstall pour assembler chaque composant, de sorte que chaque composant puisse être Vue.useséparément, afin d'atteindre l'objectif de l'introduction sur demande.

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
};

En plus de ce qui précède, il y a quelques points auxquels il convient de prêter attention :

• Si le plug-in passe un objet, sa méthode install sera exécutée . Une fonction, s'exécute elle-même, et bind this est null, puis transmet des paramètres supplémentaires

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

• Si le plug-in n'a pas été enregistré, alors après. l'enregistrement est réussi Un attribut installed sera ajouté au plug-in, avec une valeur de true. La méthode Vue.use détectera l'attribut installed du plug-in en interne, évitant ainsi l'enregistrement répété du plug-in

Vue.use En fait, ce n'est pas mystérieux Les internes. sont toujours les choses que nous utilisons habituellement, rien que pour eux. Il suffit d'enfiler un manteau haut de gamme. Nous pouvons également essayer d’utiliser cette méthode lors du développement, qui est non seulement simple, mais aussi puissante.

Recommandations associées :

Résumé des questions d'entretien Front-end Vue 2020 (avec réponses)

tutoriel vue Recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!