Vue.js 混合

Vue.js混合是在Vue实例中复用代码的一种方式。它允许我们使用一个混合对象来扩展组件的功能。混合可以包含任何组件选项，例如数据、计算属性、生命周期函数、方法等等。

基本使用

定义一个混合对象的方式与定义一个组件相同，如下所示：

const myMixin = {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};

混合对象可以被应用到任何Vue实例中，使用mixins选项即可，如下所示：

const app = Vue.createApp({
  mixins: [myMixin],
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    },
  },
});

app.mount('#app');

在Vue实例中，混合对象中的选项将被混合到Vue实例的选项中。在上面的例子中，count属性和increment方法将被添加到Vue实例中。我们同样可以在组件中使用混合。

混合选项合并

当一个混合对象和一个组件拥有相同的选项时，它们都将被合并。如果同一个选项在混合对象和组件中都存在，它们将以以下规则合并：

1. 数据对象的合并：混合对象的数据对象会在组件的数据对象之前被调用。如果数据对象中含有相同的属性，组件数据将会覆盖混合对象的数据。

2. 生命周期钩子的合并：混合对象的生命周期钩子函数会在组件自身的钩子函数之前被调用。

   如果组件定义了自己的生命周期钩子函数，并且该钩子函数也在混合对象中被定义了，那么两个钩子函数都会被调用，混合对象的钩子函数会先于组件自身的钩子函数被调用。

3. 同名选项合并：如果组件和混合对象中含有同名的选项，调用时组件的选项将优先级更高，因此混合对象中的选项将被忽略。

全局混合

我们可以通过Vue.mixin()方法来定义全局混合，它会影响所有的Vue实例。全局混合的使用频率应该尽量低，因为它会影响到所有的实例，容易引发难以追踪的副作用。

Vue.mixin({
  created() {
    console.log('全局混合');
  },
});

组件内混合

我们可以在组件内定义混合对象，该混合对象只能应用于该组件及其子组件，可以用来复用公共逻辑或模板。

const myMixin = {
  methods: {
    greet() {
      console.log('Hello!');
    },
  },
};

Vue.component('my-component', {
  mixins: [myMixin],
  created() {
    this.greet(); // 输出 'Hello!'
  },
});

const app = Vue.createApp({});

总结

Vue.js混合是一种方便的代码复用方式，它可以在不同组件之间共享代码，并且可以通过选项合并来覆盖和扩展组件的选项。我们可以通过全局混合和组件内混合来创建混合对象，以实现不同的重用场景。