如何在Vuejs项目中封装常用功能？最佳实践

Question

我正在使用Vuejs作为前端的中型项目.我正在探索封装/分离可用于许多组件的常用方法的选项包括mixins方法和插件方法.
Mixin方法
我必须在每个我想使用mixin方法的组件(文件)中编写一个import语句.这是否会增加最终文件大小,因为mixin将在多个位置导入？我可以this在mixin方法中使用.

插件方法
我可以全局安装插件,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
        }
    });

我的问题:

1. 在每个组件中导入mixin文件(需要方法)是一种有效的方法吗？
   在多个位置(组件文件)导入mixin是否反复包含mixin文件的代码并增加文件大小？

2. 将调用组件的实例vm = this作为参数传递- 这是一个好习惯吗？将组件实例作为方法参数传递会导致任何效率问题吗？

3. 如何绑定this (instance of the calling/inheriting component)到插件和/或BaseComponent中的方法,以便this引用调用/继承组件实例而不是plugin/BaseComponent？

4. 哪种方法在性能,干燥度和文件大小方面最有效？

Answer 1

我更喜欢（有人会认为这不是最好的方法，但对我而言已经足够了）是创建插件。

因此，我有一个名为vue-utils.js的文件，其中包含内容（例如）：

; (function () {
    var install = function(Vue, options) {
        Vue.prototype.$utils = {}

        var vm = new Vue({ data: Vue.prototype.$utils });

        Vue.prototype.$utils.validateEmail = function(value) {
            return /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(value);
        }
    }

    if (typeof exports == 'object') {
        module.exports = install;

    } else if (typeof define == 'function' && define.amd) {
        define([], function () { return install });

    } else if (window.Vue) {
        Vue.use(install);
    }
})();

我先定义$ utils，然后用它创建一个新的Vue实例，以便将任何属性转换为bind，然后定义另一个属性和方法。

然后通过以下方式将其加载到应用中：

import VueUtils from './plugins/vue-utils.js';
Vue.use(VueUtils);

您将可以通过this。$ utils到达HTML中的组件，例如$ utils和JS。