Vue.js 2.0 Blend

Vue.js 2.0 Hybrid Base

Hybrid is a flexible way to reus Vue components. H ybrid objects can contain any component option. When you use a blend object as a component, all options for blending objects are mixed into the options for the component itself.

Example:

// 定义一个混合对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
// 定义一个使用混合对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

Options are merged

When components and blended objects contain options with the same name, they are mixed in an appropriate way. F or example, a hook function with the same name will be mixed into an array and will therefore be called. In addition, the hook of the mixed object calls before the component's own hook:

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

Options with values for objects, such as methods, components, and directives, are blended into the same object. When two object key names conflict, take the key value pair of the component object.

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"

Note: Vue.extend() uses the same policy for consolidation.

Global blending

Hybrid objects can also be registered globally. P ay attention to use! O nce you use a global blend object, it affects all Vue instances created after . When appropriate, you can inject processing logic into custom objects.

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

Use global blending objects with caution because it affects each individually created Vue instance, including third-party templates. I n most cases, you should only apply custom options, as in the example above. You can also use it as a plug-in to avoid duplicate apps.

Custom options hybrid policies

The custom option uses the default policy, which simply overrides an existing value. If you want custom options to blend with custom logic, you can add a function to Vue.config.optionMergeStrategies:

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return mergedVal
}

For most object options, you can use methods' merge policies:

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

More advanced examples can be found in Vuex 1.x's hybrid strategy:

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)
  }
}