想在你的Vue组件之间共享代码？如果你熟悉 Vue 2 则可能知道使用 mixin ，但是新的 Composition API 提供了更好的解决方案。在本文中，我们将研究 mixins 的缺点，并了解 Composition API 如何克服它们，并使Vue应用程序具有更大的可伸缩性。
一、Mixins 被认为“有害”
在了解Composition API如何克服这些缺点之前，让我们熟悉这些缺点。
（一）命名冲突
我们看到了mixin模式如何在运行时合并两个对象。如果他们两个都共享同名属性，会发生什么？
const mixin = {
data: () => ({
myProp: null
})
}
export default {
mixins: [mixin],
data: () => ({
// 同名!
myProp: null
})
}
这就是合并策略发挥作用的地方。这是一组规则，用于确定当一个组件包含多个具有相同名称的选项时会发生什么。
1、Vue组件的默认（但可以配置）合并策略指示本地选项将覆盖mixin选项。
2、不过也有例外，例如，如果我们有多个相同类型的生命周期钩子，这些钩子将被添加到一个钩子数组中，并且所有的钩子都将被依次调用。
尽管我们不应该遇到任何实际的错误，但是在跨多个组件和mixin处理命名属性时，编写代码变得越来越困难。一旦第三方mixin作为带有自己命名属性的npm包被添加进来，就会特别困难，因为它们可能会导致冲突。
（二）隐式依赖
mixin 和使用它的组件之间没有层次关系。这意味着组件可以使用mixin中定义的数据属性（例如mySharedDataProperty），但是mixin也可以使用假定在组件中定义的数据属性（例如myLocalDataProperty）。这种情况通常是在mixin被用于共享输入验证时出现的，mixin可能会期望一个组件有一个输入值，它将在自己的validate方法中使用。
不过，这可能会引起一些问题。如果我们以后想重构一个组件，改变了mixin需要的变量的名称，会发生什么情况呢？我们在看这个组件时，不会发现有什么问题。linter也不会发现它，我们只会在运行时看到错误。
现在想象一个有很多mixin的组件。我们可以重构本地数据属性吗？或者它会破坏mixin吗？我们得手动搜索才能知道。
（三）从mixins迁移
mixin的替代方案，包括高阶组件，utility 方法和其他一些组件组成模式。
mixins的缺点是Composition API背后的主要推动因素之一，让我们快速了解一下它是如何工作的，然后再看它如何克服mixin问题。
二、Composition API 代码提取及代码重用
（一）代码提取 —— Composition API的第一个明显优点是提取逻辑很容易。
让我们使用Composition API重构上面定义的组件，以使我们定义的功能位于JavaScript模块 useCounter 中（在特性描述前面加上“use”是一种Composition API命名约定）。
//useCounter.js
import { ref, computed } from "vue";
export default function () {
const count = ref(0);
const double = computed(() => count * 2)
function increment() {
count.value++;
}
return {
count,
double,
increment
}
}
（二）代码重用
要在组件中使用该函数，我们只需将模块导入组件文件并调用它（注意导入是一个函数）。这将返回我们定义的变量，随后我们可以从 setup 函数中返回它们。
// MyComponent.js
import useCounter from "./useCounter.js";
export default {
setup() {
const { count, double, increment } = useCounter();
return {
count,
double,
increment
}
}
}
乍一看，这似乎有点冗长而毫无意义，但让我们来看看这种模式如何克服了前面讨论的mixins问题。
三、Composition API 解决 mixin 的缺陷
1、命名冲突 - 解决了
我们之前已经了解了mixin如何使用与消费者组件中的名称相同的属性，或者甚至更隐蔽地使用了消费者组件使用的其他mixin中的属性。
这不是Composition API的问题，因为我们需要显式命名任何状态或从合成函数返回的方法。
export default {
setup () {
const { someVar1, someMethod1 } = useCompFunction1();
const { someVar2, someMethod2 } = useCompFunction2();
return {
someVar1,
someMethod1,
someVar2,
someMethod2
}
}
}
当命名冲突时就会很清楚的知晓。
2、隐式依赖 - 解决了！
前面还看到mixin如何使用在消费组件上定义的 data 属性，这可能会使代码变得脆弱，并且很难进行推理。
合成函数(Composition Function)还可以调用消费组件中定义的局部变量。不过，不同之处在于，现在必须将此变量显式传递给合成函数。
import useCompFunction from "./useCompFunction";
export default {
setup () {
// 某个局部值的合成函数需要用到
const myLocalVal = ref(0);
// 它必须作为参数显式地传递
const { ... } = useCompFunction(myLocalVal);
}
}
总结：
1、mixin 模式表面上看起来很安全。然而，通过合并对象来共享代码，由于它给代码增加了脆弱性，并且掩盖了推理功能的能力，因此成为一种反模式。
2、Composition API最聪明的部分是，它允许Vue依靠原生JavaScript中内置的保障措施来共享代码，比如将变量传递给函数和模块系统。
3、这是否意味着Composition API在各方面都比Vue的经典API优越？不是的。在大多数情况下，你坚持使用经典API是没有问题的。但是，如果你打算重用代码，Composition API无疑是优越的。
以上来自英文：https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/ 的学习
网上很多译文：https://blog.csdn.net/z591102/article/details/106682344/