Vue 中的混入（Mixins）总结

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

使用混入

你可以全局定义混入，也可以局部定义混入。

全局混入

Vue.mixin({
  created: function () {
    // 这个钩子函数将应用于每一个创建的 Vue 实例。
    this.myOption = 'hello!'
  }
})

局部混入

// 定义一个混入对象
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!"

合并策略

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

• 对于数据对象，混入对象的所有属性将与组件的数据合并。
• 对于钩子函数，所有同名的钩子函数都将被合并成一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。
• 对于值为对象的选项，如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

注意事项

• 慎用全局混入，因为它会影响每一个之后创建的 Vue 实例。
• 在某些情况下，如插件或大型应用中，全局混入可能是有益的，但请注意它可能使你的代码更难调试和理解。
• 局部混入更为常见，它只影响使用它的组件。

示例

下面是一个使用局部混入的简单示例，展示了如何向组件添加一些公共的行为：

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义并使用混入对象的组件
new Vue({
  mixins: [myMixin],
  created: function () {
    this.hello() // => "hello from mixin!"
  }
})

在这个例子中，组件创建时会首先调用混入对象的 created 钩子，然后调用组件自身的 created 钩子。同时，组件可以访问到混入对象定义的 hello 方法。

混入提供了一种非常灵活的方式来复用组件逻辑，但使用时也需要谨慎，确保不会引入意外的行为或冲突。