Vue_mixin混入与插件

引言

在写代码的时候，我们常常会遇到功能大致相同的代码段。对于组件可以抽象出来调用，但是面对代码那就是cv了。比如下面这个例子，在methods方法中可以看到，两个不同组件有着完全一致的showName方法。

 解决办法

在Vue2中官方提供了一个解决办法：Mixin混入技术。

首先在App.vue的同级目录下创建mixin.js

export const mixin = {
    methods: {
        showName: function(){
            alert(this.name)
        }
    }
}

然后分别在两个组件中引入该mixin

 这样在两个组件中都拥有了引入的mixin中的方法，可以理解是将mixin.js中的文件整体放入了目标组件中。方法可以抽离出去，元素值也可以抽离。

export const mixin = {
    data(){
        return {
            x: 1,
            y: 2
        }
    },
    methods: {
        showName: function(){
            alert(this.name)
        }
    }
}

export const mix2 = {
    mounted() {
        console.log('mixin中的方法');
    }
}

对于引入了mixin的组件来说，现在data中除了本来拥有的data属性，新增了mixin中的x、y。假设原来组件中本就有x、y属性，那么值仍然为组件中的值。data数据重复的不会受到影响，但是生命周期钩子会合并执行，也就是说组件中既会执行自身的钩子，也会执行mixin中的钩子。

这个方法可以用于全局注册，作用和局部import相同，让全局所有组件直接使用mixin.js中的数据和方法，不必再手动引入（mixinx:[xxx,xxx]）。需要注意的是全局使用要在调用new Vue之前使用。

import Vue from 'vue'
import App from './App.vue'
import {mixin, mix2} from './mixin'
Vue.config.productionTip = false
Vue.mixin(mixin)
Vue.mixin(mix2)

new Vue({
  render: h => h(App),
}).$mount('#app')

关于插件

插件的本质是一个对象，该对象中必须包含一个install方法由Vue调用。

首先在App.vue同级目录下创建plugin.js，在install方法中参数表示的是Vue的构造函数。

export default {
    install(Vue) {
        console.log(Vue)
    }
}

然后在main.js中注册该插件。

import plugins from './plugins.js'
Vue.use(plugins)

接下来使用插件，既然参数是Vue的构造函数，那么可以在插件中做一些全局注册等的功能。我们以前使用过全局过滤器、全局自定义指令、全局mixin等方法，全部可以放在插件中使用。

最后讲句题外话，通过npm可以检查 `webpack` 或者诸如 ` less-loader` 等工具的历史版本。

npm view webpack versions