Conseils pour utiliser les mixins pour réaliser la réutilisation du code dans Vue

Vue est un framework JavaScript très populaire. Il aide non seulement les développeurs à créer rapidement des applications complexes d'une seule page, mais fournit également de nombreuses fonctions pratiques pour nous aider à mieux écrire du code. Parmi eux, les mixins sont un concept très important, qui fournit un moyen simple et efficace de réaliser la réutilisation du code.

Dans cet article, nous allons approfondir les mixins de Vue et démontrer à travers quelques exemples comment l'utiliser pour mettre en œuvre des techniques de réutilisation de code.

Que sont les mixins

Les mixins sont des objets dans Vue qui peuvent contenir un nombre illimité d'options réutilisables. Ces options peuvent être n'importe quelle méthode de cycle de vie, données ou propriété calculée, etc. Lorsque nous utilisons des mixins dans un composant, il fusionne toutes les options de l'objet mixins dans le composant, ce qui permet au composant d'avoir toutes les fonctionnalités de l'objet mixins.

Exemple

Voici un exemple simple de mixins qui définit une méthode de journalisation :

const logMixin = {
  methods: {
    log(message) {
      console.log('Logging:', message);
    }
  }
}

Maintenant, nous pouvons utiliser des mixins dans le composant pour fusionner l'objet logMixin dans le composant :

Vue.component('my-component', {
  mixins: [logMixin],

  mounted() {
    this.log('Component mounted!');
  }
});

Dans cet exemple, nous avons fusionné l'objet logMixin dans le composant my-component et y ai utilisé la méthode log.

Lorsque nous exécutons l'application et regardons la console, nous pouvons voir le résultat suivant :

Logging: Component mounted!

Cela indique que la méthode de journalisation générée par mix est déjà disponible dans le composant.

Utiliser la fusion d'options

Pour mieux comprendre le fonctionnement des mixins, examinons de plus près les règles de fusion d'options dans Vue. Dans Vue, les options des composants sont fusionnées dans un objet d'options final. Cet objet contient toutes les options du composant parent au composant enfant. Lorsque plusieurs options de composants portent le même nom, Vue effectue une fusion d'options, les fusionnant dans une nouvelle option.

Lorsque nous utilisons cette option pour fusionner et publier des mixins sur plusieurs composants, nous devons nous assurer que les différentes options des mixins n'entrent pas en conflit les unes avec les autres. Nous pouvons éviter ce conflit en utilisant notre propre espace de noms :

const logMixin = {
  methods: {
    log(message) {
      console.log('Logging:', message);
    }
  }
}

const helloMixin = {
  methods: {
    hello() {
      console.log('Hello!');
    }
  }
}

const helloLogMixin = {
  mixins: [logMixin, helloMixin],

  methods: {
    world() {
      this.log('World');
      console.log('World');
    }
  }
}

Vue.component('my-component', {

  mixins: [helloLogMixin],

  mounted() {
    this.hello();
    this.world();
  }
});

Dans cet exemple, nous définissons d'abord logMixin et helloMixin, puis les fusionnons dans l'objet helloLogMixin. Dans helloLogMixin, nous avons également ajouté une méthode world, qui appellera la méthode log dans logMixin et enregistrera un message sur la console. Enfin, nous avons fusionné helloLogMixin dans le composant my-component et appelé les méthodes hello et world dans la fonction hook de cycle de vie montée.

Après avoir exécuté l'application, nous pouvons voir le résultat suivant dans la console :

Hello!
Logging: World
World

Cela montre que les méthodes helloMix et logMixin peuvent être utilisées dans le composant my-component et que leur portée est complètement isolée.

Utiliser des mixins globaux

Dans Vue, nous pouvons également utiliser des mixins globaux. Ces mixins peuvent être utilisés dans toute l’application et seront hérités par tous les composants.

Pour utiliser des mixins globaux, nous pouvons appeler la méthode Vue.mixin. Cette méthode nécessite de passer un objet mixin contenant des options réutilisables. Par exemple :

const logMixin = {
  methods: {
    log(message) {
      console.log('Logging:', message);
    }
  }
}

Vue.mixin(logMixin);

Maintenant, nous avons logMixin mélangé à l'ensemble de l'application.

Lorsque nous exécutons l'application, dans la console, nous pouvons voir le résultat suivant :

Logging: Message from App component

Cela indique que nous avons injecté avec succès le mixin dans l'application et que les méthodes du mixin sont disponibles dans tous les contextes de composants.

Résumé

Dans Vue, les mixins sont une fonction très pratique qui peut nous aider à réaliser facilement la réutilisation du code. À l'aide des mixins, nous pouvons définir du code réutilisable en tant qu'objets mixin et les incorporer dans des composants. Nous pouvons également utiliser des mixins globaux pour injecter du « code global » dans l’ensemble de l’application. Grâce aux exemples ci-dessus, nous pouvons comprendre comment fonctionnent les mixins de Vue et comment les appliquer à des applications réelles.

Si vous souhaitez en savoir plus sur Vue, veuillez parcourir la documentation officielle.

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!