Vue混入(mixin)

理解：一个混入对象可以包含任意组件选项，这些选项将混入到组件本身的选项；
作用：用来分发Vue组件中的可服用功能；

局部混入

//选项合并
var mixin = {
  data: function () {
      return {
        message: 'hello',
        foo: 'abc'
       }
    },
    created: function () {
        console.log('混入对象的钩子被调用');
     },
     methods: {
        foo: function () {
             console.log('foo')
         },
         conflicting: function () {
             console.log('from mixin')
          }
      }
}
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log('组件钩子被调用');
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
   },
   methods: {
      bar: function () {
         console.log('bar')
      },
      conflicting: function () {
         console.log('from self')
      }
    }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

通过上面的例子，可以得出结论：

1. 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”,
   发生冲突时以组件数据优先
2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将
   在组件自身钩子之前调用。
3. 值为对象的选项，例如 methods、components 和 directives，将被合并为同
   一个对象。两个对象键名冲突时，取组件对象的键值对。

全局混入

一旦使用全局混入，它将影响每个单独创建的 Vue 实例 (包括第三方组件)，项目开发中不推荐，请谨慎使用。