vue2中mixins的用法和需要注意的地方

本文链接：https://blog.csdn.net/weixin_46504400/article/details/138659155

在Vue 2中，Mixins 是一种非常有用的特性，它允许您定义可复用的代码，这些代码可以在多个组件之间共享。

Mixins 可以包含任意组件选项，比如 data、methods、created、computed 等。当组件使用 Mixins 时，Mixins 中的所有选项将被“混合”到组件本身的选项中。

下面是一个简单的示例：

// 定义一个 mixin
const myMixin = {
  created() {
    console.log('Mixin created');
  },
  methods: {
    hello() {
      console.log('Hello from mixin!');
    },
  },
};

// 使用 mixin 的组件
const app = new Vue({
  el: '#app',
  mixins: [myMixin], // 使用 mixin
  created() {
    console.log('Component created');
  },
  mounted() {
    this.hello(); // 调用 mixin 的方法
  },
});

在这个示例中，我们首先定义了一个名为 myMixin 的 mixin，它包含一个 created 钩子函数和一个 hello 方法。然后，我们在 app 组件中使用了这个 mixin。

当我们创建 app 实例时，会先执行 myMixin 中的 created 钩子函数，然后再执行 app 组件自身的 created 钩子函数。同时，我们也可以在 app 组件的 mounted 钩子函数中调用 myMixin 中的 hello 方法。

需要注意的是，如果多个 mixins 包含相同的选项（如生命周期钩子函数或方法），那么这些选项将以它们在数组中出现的顺序进行合并。也就是说，mixins 数组中的最后一个 mixin 中的同名选项会覆盖前面的同名选项。

此外，如果多个组件使用了同一个 mixin，那么这个 mixin 将会在所有使用它的组件中共享。这可能会导致一些问题，例如如果多个组件修改了同一个数据，那么这些修改可能会互相影响。因此，通常建议只在确实需要共享代码的组件之间使用 mixins，而不是在所有的组件之间都使用。

在Vue 2中，您可以使用mixin方法来定义全局混入和局部混入。

全局混入会影响到所有创建的Vue实例，而局部混入只会影响到定义它们的组件。

下面是一个简单的示例：

// 定义一个全局混入
Vue.mixin({
  created() {
    console.log('Global mixin created');
  },
});

// 定义一个局部混入
const localMixin = {
  created() {
    console.log('Local mixin created');
  },
};

// 使用局部混入的组件
const app = new Vue({
  el: '#app',
  mixins: [localMixin], // 使用局部混入
  created() {
    console.log('Component created');
  },
});