vue2.x mixin 混入

1、概述

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

一个混入对象可以包含任意组件选项。

当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

2、快捷使用

混入简单使用

3、默认选项合并规则

大致规则：组件 & 混入冲突时，以组件的数据优先。（钩子函数还会执行，其他会被覆盖，详细见下方）

-1、合并-数据对象

规则：在内部会进行递归合并（并在发生冲突时 以 组件数据优先）。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc',
    }
  },
}

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

-2、合并-钩子函数

规则： 同名钩子函数 将合并为一个数组，因此都将被调用。（！混入对象的钩子 将在 组件自身钩子 之前调用。）

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  },
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  },
})

// 先输出=> "混入对象的钩子被调用"
// 后输出=> "组件钩子被调用"

-3、合并-值为对象的选项

规则：methods, components, directives, 将被合并为一个对象。（！键值对冲突时，取组件对象的键值对。）

示例：

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    },
  },
}

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

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

【注意】Vue.extend() 也使用同样的策略进行合并。

4、全局混入

混入也可以进行全局注册。

语法

/**
 * @brief: 设置 Vue 全局混入项。
 * @param {Object} options 组件的配置选项。
 * @return {*}
 */
Vue.mixin(options)

注意

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

示例：

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    // 这里的使用：当配置项有 myOption 时，则 log 这个配置项的值
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  },
})

new Vue({
  myOption: 'hello!',
})
// => "hello!"

注意 2：请谨慎使用全局混入。
1）因为它会影响每个单独创建的 Vue 实例 （包括第三方组件）。
2）大多数情况下，只应当应用于自定义选项，就像上面示例一样。
3）推荐将其作为插件发布，以避免重复应用混入。

5、自定义选项合并策略

【默认合并策略】自定义选项将使用默认策略，即简单地覆盖已有值。

如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
}

【合并策略 - 多数值为对象的选项】可使用与 methods相同的合并策略

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

可以在 Vuex 1.x 的混入策略里找到一个更高级的例子：

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions),
  }
}