vue mixin混入

官方文档

概念：

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

eg:

// 混合对象
const mixin = {
    created() {
        this.hello()
    },
    methods: {
        hello() { console.log('hello') }
    }
}
export { mixin }
// 在组件中引入，并注入该组件
<script>
import { mixin } from '../../mixin'
export default {
    mixins: [mixin] // 'hello'
}
</script>

 

 选项合并

规则：

1、当组件和混入对象含有同名选项时，数据对象在内部会 进行递归合并，并在冲突时，以组件数据优先： 

下是官方文档的例子，很清晰： 

var mixin = {
  data() {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}
new Vue({
  mixins: [mixin],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

2、同名钩子函数，将会被合并为一个数组

3、同名钩子函数执行顺序：混合对象钩子先执行，组件钩子后执行

eg：文档中的一个例子

var mixin = {
  created() {
    console.log('混入对象的钩子被调用')
  }
}
new Vue({
  mixins: [mixin],
  created() {
    console.log('组件钩子被调用')
  }
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"

4、值为对象的选项，如： methods、components、directives 将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。（也就是说当组件中值为对象的选项,，如methods中的所有方法名 与混入对象methods中的方法名有冲突时，获取组件对象） 

var mixin = {
  methods: {
    conflicting: function () {
      console.log('from mixin')
    }
  }
}
var vm = new Vue({
  mixins: [mixin],
  methods: {
    conflicting: function () {
      console.log('from self')
    }
  }
})
vm.conflicting() // => "from self"

 

全局混入

全局 注册，但是这种方式会对每一个组件都会有影响，当全局注册了一个混入对象，相当于混入对象会注册到每一个vue实例中去：

Vue.mixin({
  created() {
    console.log('我是来自全局mixin的消息！')
  }
})
new Vue({}) // '我是来自全局mixin的消息！'
new Vue({}) // '我是来自全局mixin的消息！'

tip:

谨慎使用全局混入，它会影响每一个单独 创建的Vue实例（包括第三方组件）。官方推荐：以插件形式发布。