混入

基础

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

案例：

    <div id="father">
        <my-cmp></my-cmp>
    </div>
    
    <script>
        var mixin = {
            data(){
                return {
                    msg:"我是混入数据"
                }
            }
        }

        Vue.component('my-cmp', {
            mixins: [mixin],
            template: `
            <div>{{ this.msg }}</div>
            `
        })
        
        let vm=new Vue({
            mixins: [mixin],
            created(){
                console.log(this.msg);;
            },
            el:"#father",
        })
    </script>

可以看到不管是vue的实例化对象还是组件，绑定了mixin后都可以直接调用mixin的数据，而且还是通过this来调用的，说明数据完全绑定进了它们内部

选项合并

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

合并数据，以组件数据优先：

var mixin = {
  data () {
    return {
      msg: 'hello',
    }
  }
}
new Vue({
  mixins: [mixin],
  data: {
    msg: 'goodbye',
  },
  created: function () {
    console.log(this.msg)
})

合并钩子函数，将合并为一个数组。先调用混入对象的钩子，再调用组件自身钩子。
由此也可以检验出，钩子函数是特殊的存在，每个组件、混入对象、实例对象都有自己的生命周期，所以也就有了各自的钩子函数，在使用它们时，它们各自的钩子函数都会执行。
所以不会像上面的data属性一样，混入对象的数据如果和组件、vue实例相同时会被覆盖

var mixin = {
  created () {
    console.log('混入对象钩子')
  }
}

new Vue({
  el: '#app',
  mixins: [mixin],
  created () {
    console.log('组件钩子')
  }
})

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})