Vue3 : mixins

Les mixins définissent une partie des méthodes réutilisables ou des propriétés calculées. Un objet mixin peut contenir n'importe quelles options de composant. Lorsqu'un composant utilise l'objet mixin, toutes les options de l'objet mixin seront fusionnées dans les options propres du composant.

Prenons un exemple simple :

Exemple

//Définir un objet mixin const myMixin = { created() { this.hello() }, methods: { hello() { console.log('Bienvenue dans l'exemple de mixin - EXEMPLE !') } } } //Définir une application, en utilisant des mixins const app = Vue.createApp({ mixins: [myMixin] }) app.mount('#app') //=> "Bienvenue dans l'exemple de mixin - EXEMPLE !"

Essayez-le vous-même »

Fusion des options

Lorsque le composant et l'objet mixin contiennent des options portant le même nom, ces options seront fusionnées de manière appropriée.

Par exemple, les objets de données sont fusionnés superficiellement en interne (un niveau de profondeur de propriété), et en cas de conflit avec les données du composant, les données du composant ont la priorité.

Dans l'exemple suivant, l'instance Vue et l'objet mixin contiennent la même méthode. D'après le résultat de sortie, nous pouvons voir que les deux options sont fusionnées.

Exemple

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VueExemple de test - Tutoriel d'exemple(example.com)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id = "app"></div> <script type = "text/javascript"> const myMixin = { data() { return { message: 'hello', foo: 'example' } } } const app = Vue.createApp({ mixins: [myMixin], data() { return { message: 'goodbye', bar: 'def' } }, created() { document.write(JSON.stringify(this.$data)) } })

Le résultat de sortie est:

{"message":"goodbye","foo":"example","bar":"def"}

Essayez-le vous-même »

Les fonctions de hook portant le même nom seront fusionnées dans un tableau, de sorte que toutes seront appelées. De plus, les hooks de l'objet mixin seront appelés avant les hooks propres au composant.

const myMixin = {
  created() {
    console.log('mixin 对象的钩子被调用')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('组件钩子被调用')
  }
})

// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

Les options dont les valeurs sont des objets, telles que methods, components et directives, seront fusionnées dans le même objet. Lorsque deux noms de clés d'objet entrent en conflit, la paire clé-valeur de l'objet du composant est retenue.

Exemple

const myMixin = { methods: { foo() { console.log('foo') }, conflicting() { console.log('from mixin') } } } const app = Vue.createApp({ mixins: [myMixin], methods: { bar() { console.log('bar') }, conflicting() { console.log('from self') } } }) const vm = app.mount('#app') vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self"

Dans l'exemple ci-dessus, nous avons appelé les trois méthodes suivantes :

vm.foo();
vm.bar();
vm.conflicting();

D'après le résultat de sortie, dans l'option methods, si le même nom de fonction est rencontré, l'instance Vue a une priorité plus élevée et sa sortie sera exécutée.

Mixin global

Vous pouvez également enregistrer un objet mixin globalement. Soyez prudent lorsque vous l'utilisez ! Une fois qu'un objet mixin global est utilisé, il affectera toutes les instances Vue créées par la suite. Lorsqu'il est utilisé correctement, il peut injecter une logique de traitement pour des objets personnalisés.

Exemple

const app = Vue.createApp({ myOption: 'bonjour !' }) //Injectez un gestionnaire pour l'option personnalisée 'myOption'. app.mixin({ created() { const myOption = this.$options.myOption if (myOption) { document.write(myOption) } } }) app.mount('#app') // => "hello!"

Essayez-le vous-même »

Utilisez les objets de mixin globaux avec prudence, car ils affectent chaque instance Vue créée individuellement (y compris les modèles tiers).

Autres extensions