Vue.js 中使用 Mixins

Question

一个很常见的场景：有两个非常相似的组件，它们拥有非常相似的基本功能，但是它们之间又有足够的不同的地方，该如何选择呢？我们是应该将它们分成两个完全不同的组件呢？还是创建一个基础组件，然后定义足够多的 props 以方便区分使用场景？

这两种方式都不是完美的：如果你将它们分成两个完全不同的组件，在需求变化（功能变化）时，可能会增加需要同时修改两个组件的风险，这违反了 DRY 的前提，另一方面，太多的 props 很快会让人变得凌乱，并且迫使维护人员，甚至是你自己，要首先理解这些 props 的上下文才能使用它，这会让人非常失望。

Vue 的 Mixins 是非常实用的编程方式，因为最终实用的编程是通过不断减少运动部件（moving parts）使代码变得容易理解。（关于这一点 Michael Feathers 有一个很好的引用），一个 mixin 允许你封装一个功能，以便你能在整个应用程序中的不同组件中使用它，如果 mixin 被正确的创建，它们是纯粹的–它们不会修改或更改函数的作用范围（scope）之外的内容，因此您可以在多个地方执行它们，并且只要输入值相同，总是能非常可靠得得到相同的结果，这真的非常强大。

认识 Mixins

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

栗子

假设我们有一些不同的组件, 它们的工作是切换状态 boolean, 一个模态（modal）和一个提示（tooltip），这些 tooltips 和 modals 没有很多共同之处，除了这个功能，它们看起来不一样，它们使用起来也不尽相同，但是它们的逻辑是相似的。

//modal
const Modal = {
  template: '#modal',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}
 
//tooltip
const Tooltip = {
  template: '#tooltip',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

我们可以从中提取逻辑，并创建可以复用的部分：

const toggle = {
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}
 
const Modal = {
  template: '#modal',
  mixins: [toggle]
};
 
const Tooltip = {
  template: '#tooltip',
  mixins: [toggle]
};

duang — 一个小而简单的例子让我们知道了 Mixins 对于封装一些可复用的功能如此有趣、方便、实用。