Vue -- Mixins 详解

2,015 阅读2分钟

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

基础概念

var mixin = {
  created: function () { console.log(1) }
}

// 全局混入
Vue.mixin(mixin)

// 组件内使用混入对象
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})

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

选项合并策略

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

  • data数据对象在内部会进行递归排序,并在发生冲突时以组件数据优先
  • 同名钩子函数会合并成一个数组,都会被调用。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
  • methods components directives 等值为对象的选项将被合并成为同一个对象。两个对象键名冲突时,取组件对象的键值对

可以通过Vue.config.optionMergeStrategies 访问选项合并策略

Vue.config.optionMergeStrategies

自定义选项合并策略

vm.$options 自定义选项的合并使用默认策略,即简单地覆盖已有的值。如果想让自定义选项以自定义逻辑合并,可以向 Vue.config.optionMergeStrategies 添加一个函数

// 合并策略选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数
// Vue 实例上下文被作为第三个参数传入。
Vue.config.optionMergeStrategies.myOption = function (parent, child, vm) {
  // 返回合并后的值
}

对于多数值为对象的选项,可以直接使用与 methods 相同的合并策略:

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