Я работаю с проектом среднего размера, используя Vuejs в качестве внешнего интерфейса. Варианты, которые я изучаю для инкапсуляции / разделения общих методов, которые могут быть использованы во многих компонентах, включают в себя подход mixins и подход плагинов.
Смешанный подход
Я должен написать оператор импорта в каждом компоненте (файле), где я хочу использовать методы mixin. Увеличивает ли это окончательный размер файла, так как миксин будет импортирован в нескольких местах? я могу использоватьthis в смешанных методах.

Плагин Подход
Я могу установить плагин глобально сVue.use(MyPlugin) и использовать плагин в любом компоненте, не импортируя плагин в каждом компоненте.
Недостаток: я не могу использоватьthis[field] в методах плагина. Я должен передать экземпляр вызывающего компонентаvm использовать такие методы.

Изменить 1 - включить Расширить подход
Расширить подход
Я могу определить базовый компонент со всеми методами, которые будут использоваться во многих других компонентах, а затем расширить этот BaseComponent для создания новых компонентов. Здесь снова мне нужно передать экземпляр наследующего компонента, который используется в BaseComponent и не относится к вызывающему / наследующему компоненту.

Пожалуйста, найдите тривиальный пример кода, аналогичного тому, который я использую ниже:

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

Мои вопросы:

Импорт файла mixin в каждый компонент (который требует методов) - это эффективный способ сделать это?
Включает ли импорт mixin в нескольких местах (файлах компонентов) код файла mixin многократно и увеличивает ли размер файла?

Передача экземпляра вызывающего компонентаvm = this в качестве параметра - это хорошая практика? Вызывает ли передача экземпляров компонентов в качестве параметров метода какую-либо проблему эффективности?

Как связатьthis (instance of the calling/inheriting component) к методам внутри плагина и / или BaseComponent, чтобыthis ссылается на экземпляр вызывающего / наследующего компонента, а не на плагин / BaseComponent?

Какой подход наиболее эффективен в отношении производительности, СУХОСТИ и размера файла?