教大家如何管理 Vue Mixins

Mixin 是 Vue 2 独有的功能。

在 Vue 3 中，可以使用Composition API来实现可重用的功能。

当你的 Vue 项目开始增长时，如果你有类似的组件，你可能会发现自己一遍又一遍地复制和粘贴相同的数据、方法和观察者。

当然，您可以将所有这些单独的文件编写为单个组件，并使用 props 来自定义它们。

然而，使用这么多道具很容易变得混乱和混乱。

为了避免这项艰巨的任务，大多数人只是继续添加重复的代码。最好的 Vue 开发人员会知道有一个更好的解决方案 – Vue Mixins。

解决方案 – Vue Mixins

值得庆幸的是，在 Vue 2 中，我们可以使用 Mixins ——这是在不同组件之间共享可重用代码的最简单方法之一。

Mixin 对象可以使用任何组件选项- 数据、安装、创建、更新等 - 当组件使用 mixin 时，mixin 对象中的所有信息都将混合到组件中。

然后，该组件可以访问 mixin 中的所有选项，就像您在组件本身中声明它一样。经过一个例子后，这会更有意义。

因此，让我们创建一个添加数据、生命周期挂钩和方法的 mixin。

export default {
  data() {
    return {
      msg: 'Hello World',
    }
  },
  created: function () {
    console.log('Printing from the Mixin')
  },
  methods: {
    displayMessage: function () {
      console.log('Now printing from a mixin function')
    },
  },
}

然后，在任何 Vue 组件中，我们都可以导入这个 mixin 并使用它！

import mixin from "./mixin.js";
new Vue({
  mixins: [mixin],
  created: function () {
    console.log(this.$data);
    this.displayMessage();
  },
});
// EXPECTED OUTPUT
// => "Printing from the Mixin"
// => {msg: ‘Hello World’}
// => "Now printing from a mixin function"

可以看到，使用 mixin 后，该组件包含了 mixin 中的所有数据，并且可以通过使用 来访问它this。您还可以使用变量而不是单独的文件来定义 mixin 。

另外，需要注意的是，当使用Vue 生命周期钩子时，mixin 钩子将在组件的钩子之前被调用。

如果出现命名冲突会怎样？

当 mixin 中存在与组件中的选项同名的数据、方法或任何组件选项时，组件与其 mixin 之间可能会发生命名冲突。

如果发生这种情况，组件本身的属性将优先。

例如，如果title组件和 mixin 中都有一个数据变量 —this.title将返回组件中定义的值。在代码中，这看起来像：

export default {
  data() {
    title: 'Mixin'
  },
}

<script>
import mixin from './mixin.js'
export default {
   mixins: [mixin],
   data () {
      title: ‘Component’
   },
   created: function () {
      console.log(this.title)
   }
}
// Output: "Component"
</script>

来自我们组件的数据优先于默认的 mixin 值。