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

Question

我有一个 Vue.js 项目，它在多个文件中使用一个方法，所以我创建了一个实用程序类来在那里编写这个方法，例如：

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

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

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

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

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

Answer 1

这是一个很好的问题。不幸的是，没有确切的答案，但我将根据我自己在大型 Vue 代码库中的工作经验提供一些指导方针。

混合

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

就我而言，我有一个inputmixin 定义了props一些data（输入和错误元素的唯一 id），以及用于发出诸如blur. 这是大约 60 行代码，否则我必须为九个不同组件中的每一个重新键入。

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

mixin 的主要缺点是它会使您的代码更难阅读。想象一下，你AppTextArea六个月后回到组件上工作，并且不清楚某些事情如何以及为什么工作或它们在哪里定义......然后你记得它使用了一个混入，然后你必须深入了解混入代码......换句话说，它是隐式的，而不是显式的实现。

共享功能

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

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

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

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