我应该使用 mixins 还是实用程序 class？

Question

我有一个 Vue.js 项目在多个文件中使用一种方法，所以我创建了一个实用程序 class 来在其中编写此方法，例如：

export class Util{
  doSomething(){
    return 'something'
  }
}

但我知道我可以使用 mixin 来做到这一点，例如：

export const myMixin = {
   methods: {
     doSomething(){
       return 'something'
     }
   }
}

我应该使用 mixin 还是实用程序 class？

我什么时候应该使用其中之一？

Answer 1

如果doSomething对组件有依赖（它使用某些数据属性，或者它依赖this.$el，等等......），你应该考虑写它作为混入。

否则，如果它可以在 Vue 组件之外的其他上下文中使用，请使用实用程序 class 或函数。如果它只是一种方法，则无需创建 class。您还可以导出函数。

Answer 2

这是一个很好的问题。不幸的是，没有准确的答案，但我会根据我自己使用大型 Vue 代码库的经验提供一些指导方针。

混合

Mixins 非常适用于您有一组相互依赖的、无副作用的代码并希望在组件之间共享的情况。

在我的例子中，我有一个 input mixin，它定义了 props、一些 data（输入和错误元素的唯一 ID），以及用于发出事件的方法，例如 blur。这是大约 60 行代码，否则我必须为九个不同的组件中的每一个重新键入。

mixin 的好处类似于传统 OOP 中继承 class 的好处。 IE。代码重用和复杂性封装。

mixin 的主要缺点是它会使您的代码更难阅读。想象一下，六个月后你回来处理 AppTextArea 组件，并且不清楚某些东西是如何工作的，为什么工作或者它们是在哪里定义的......然后你记得它使用了一个 mixin，然后你有深入研究 mixin 代码......换句话说，它是隐式的，而不是显式的实现。

共享函数

共享函数非常适用于您可以在应用程序中重用无副作用代码单元的情况。

在我的例子中，我有一个 date 库，它有一个 formatBySlash 函数，它接受一个 Date 对象和 returns 类似 "5/12/2018" 的东西。我已将其添加为全局过滤器，因此我可以在我的模板中执行 {{ post.createdAt | formatBySlash }} 之类的操作。此外，我可以导入函数并直接在方法或计算中使用它属性.

共享函数灵活、易于测试，并使您的代码更加明确。

总而言之，我通常建议编写一个共享函数，除非您的用例确实需要它是一个混入。

我应该使用 mixins 还是实用程序 class？

Should I use mixins or an utility class?

javascript

vue.js

vue-component

es6-class