混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

选项合并

1.当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

2.数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

3.同名钩子函数将合并为一个数组，因此都将被调用。

另外，混入对象的钩子将在组件自身钩子之前调用。

4.值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对

// mixins.js

export default {
    created(){
        // 混入对象的同名钩子先执行
        console.log('混入同名钩子函数在组建钩子函数前触发');
    },
    data(){
        return {
            message:"混入的话：你好我是混入",
            arr:['d','e','f']
        }
    },
    methods:{
        chongtu(){
            console.log('from mixins');
        },
        foo: function () {
            console.log('foo')
          },
    }
}
 ————————————————————————————————————————————————————————————————————————
//组件
<script>
import mixins from '@/module/mixin'
export default {
  created(){
    console.log(this.arr); //==> [a,b,c]
    this.chogntu() // ==>'from self'
  },
  mixins:[mixins],
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
            message:"你好我是组建本身的message",
            arr:['a','b','c']
    }
  },
  methods:{
    chogntu(){
      console.log('from self');
    },
    bar(){
      console.log('bar');
    }
  }
}
</script>

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例（包括第三方组建）。

// main.js 
Vue.mixin({ created:function(){ console.log('全局init...'); } })