Ich arbeite mit einem mittelgroßen Projekt, das Vuejs als Frontend verwendet. Zu den Optionen, die ich erforsche, um die gängigen Methoden zu kapseln / zu trennen, die in vielen Komponenten verwendet werden können, gehören Mixins-Ansatz und Plugin-Ansatz.
Mixin Approach
Ich muss in jeder Komponente (Datei), in der ich die Mixin-Methoden verwenden möchte, eine Importanweisung schreiben. Erhöht dies die endgültige Dateigröße, da das Mixin an mehreren Stellen importiert wird? Ich kann nutzenthis innerhalb der Mixin-Methoden.

Plugin Approach
Ich kann das Plugin global mit @ installierVue.use(MyPlugin) und verwende das Plugin in einer beliebigen Komponente, ohne das Plugin in jede Komponente zu importieren.
Drawback: Ich kann @ nicht verwendthis[field] innerhalb der Plugin-Methoden. Ich muss die Instanz der aufrufenden Komponente übergebenvm, um solche Methoden anzuwenden.

Edit 1 - um Extend Approach @ aufzunehm
Extend Approach
Ich kann eine Basiskomponente mit allen Methoden definieren, die in mehreren anderen Komponenten verwendet werden, und diese Basiskomponente dann erweitern, um neue Komponenten zu erstellen. Auch hier muss ich die Instanz der vererbenden Komponente übergeben, diese in der BaseComponent verwendete bezieht sich nicht auf die aufrufende / vererbende Komponente.

Bitte finden Sie im Folgenden ein einfaches Beispiel für Code, das dem entspricht, was ich verwende:

    //mixin.js
    var MyMixin = {
       methods:{
          getName(){
              return this.name;
          }
       }
    };
    export default MyMixin;  


    //plugin.js
    var MyPlugin = {};

    MyPlugin.install = function(Vue, options){
        var service = {
    	getTheName(){
    	    retrun this.name;
    	},
            getTheNameVersion2(vm){  //here vm is the instance of the calling component passed as a parameter - is this proper way?
                return vm.name;
            }  
        }
    	
        Vue.prototype.$service = service;
    };

    export default MyPlugin;



    //my-component.js
    import MyMixin from './mixin';
    export default{
        template:require('./my-component-template.html'),
        mixins:[MyMixin],
        data(){
            return{
    	    name:'John Doe'
    	}
        },
        methods:{
           displayNameFromMixin(){
              console.log(this.getName()); //displays John Doe - using the mixin method.
           },
           displayNameFromPlugin(){
              console.log(this.$service.getTheName()); //error "this" references the plugin instead of the component instance
           },
           displayNameFromPluginVersion2(){
               console.log(this.$service.getTheNameVersion2(this)); //this works - passing the instance as method parameter
           }
    }   
    
    //base-component.js  
    export default{
        methods:{
            getName(vm){
                return vm.name;
            }
        }
    }   
    
//another-component.js
import BaseComponent from './base-component';
BaseComponent.extend({
    template:require('./another-component-template.html'),
    data(){
        return{
            name:'Jack Daniels';
        }
    },
    methods:{
        getNameFromBaseComponent(){
            console.log(this.getName(this)); //displays Jack Daniels - instance passed as method parameter
        }
    }
});


    //main.js

    import Vue from 'vue';
    import MyPlugin from './plugin';
    import MyComponent from './my-component';
    import AnotherComponent from './another-component';

    Vue.use(MyPlugin);

    new Vue({
        el:'body',
        components:{
            MyComponent, AnotherComponent
        }
    });

Meine Fragen

Mixin-Datei in jede Komponente importieren (was die Methoden erfordert) Ist dies eine effiziente Methode?
Nimmt der Import von Mixins an mehreren Stellen (Komponentendateien) wiederholt den Code der Mixin-Datei auf und erhöht sich die Dateigröße?

Instanz der aufrufenden Komponente übergebenvm = this als Parameter - Ist es eine gute Praxis? Verursacht die Weitergabe von Komponenteninstanzen als Methodenparameter Effizienzprobleme?

Wie binde ichthis (instance of the calling/inheriting component) zu den Methoden innerhalb des Plugins und / oder der BaseComponent, so dassthis bezieht sich auf die aufrufende / übernehmende Komponenteninstanz und nicht auf plugin / BaseComponent?

Welcher Ansatz ist hinsichtlich Leistung, Trockenheit und Dateigröße am effektivsten?