Mixins Vue.js

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

Prenons un exemple simple :

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 data sont fusionnés superficiellement en interne (un niveau de profondeur de propriété), et lorsqu'ils entrent en conflit avec les données du composant, les données du composant sont prioritaires.

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

Mixin call
Component call

S'il y a des noms de fonctions identiques dans l'option methods, l'instance Vue aura la priorité. Dans l'exemple suivant, l'instance Vue et les options methods de l'objet mixin contiennent les mêmes fonctions :

HelloWorld 方法
start 方法
Main：相同方法名

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

vm.hellworld();
vm.start();
vm.samemethod();

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

Mixin global

Vous pouvez également enregistrer globalement un objet mixin. Notez l'utilisation ! Une fois qu'un objet mixin global est utilisé, il affectera toutes les instances Vue créées par la suite. Lorsqu'il est utilisé à bon escient, il peut injecter une logique de traitement pour des objets personnalisés.

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