这篇文章主要讲解了Vue3构成API替换Vue mixin的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
让我们快速回顾一下混合模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位。
通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性,诸如数据,方法,计算等。
//MyComponent.js
出口默认{
数据:()=比;({
myDataProperty:零
}),
方法:{
myMethod () {…}
}//?
} 当我们想在组件之间共享相同的属性时,可以将公共属性提取到一个单独的模块中:
//MyMixin.js
出口默认{
数据:()=比;({
mySharedDataProperty:零
}),
方法:{
mySharedMethod () {…}
}
} 现在,我们可以通过将其分配给mixin配置属性将其添加到任何使用的组件中。在运行时,Vue会将组件的属性与任何添加的mixin合并。
//ConsumingComponent.js
从“进口MyMixin。/MyMixin.js";
出口默认{
mixin (MyMixin):,
数据:()=比;({
myLocalDataProperty:零
}),
方法:{
myLocalMethod () {…}
}
} 对于这个特定的例子,在运行时使用的组件定义应该是这样的:
出口默认{
数据:()=比;({
mySharedDataProperty:零
myLocalDataProperty:零
}),
方法:{
mySharedMethod () {…},
myLocalMethod () {…}
}
}
早在2016年中期,丹·阿布拉莫夫(Dan阿布拉莫夫)就写了《mixin被认为是有害的》(mixin认为有害),他在书中辩称,将mixin用于在反应组件中重用逻辑是一种反模式,主张远离它们。
不幸的是,他提到的关于反应mixin的缺点同样适用于Vue。在了解构成API如何克服这些缺点之前,让我们熟悉这些缺点。
<>强命名冲突
我们看到了混合模式如何在运行时合并两个对象。如果他们两个都共享同名属性,会发生什么?
const mixin={
数据:()=比;({
myProp:零
})
}
出口默认{
mixin(混合):,
数据:()=比;({//同名!
myProp:零
})
} 这就是合并策略发挥作用的地方。这是一组规则,用于确定当一个组件包含多个具有相同名称的选项时会发生什么。
Vue组件的默认(但可以配置)合并策略指示本地选项将覆盖mixin选项.Vue组件的默认(可选配置)合并策略指示本地选项将覆盖mixin选项,不过也有例外,例如,如果我们有多个相同类型的生命周期钩子,这些钩子将被添加到一个钩子数组中,并且所有的钩子都将被依次调用。
尽管我们不应该遇到任何实际的错误,但是在跨多个组件和mixin处理命名属性时,编写代码变得越来越困难。一旦第三方mixin作为带有自己命名属性的npm包被添加进的来,就会特别困难,因为它们可能会导致冲突。
<>强隐式依赖
mixin和使用它的组件之间没有层次关系。这意味着组件可以使用mixin中定义的数据属性(例如mySharedDataProperty),但是mixin也可以使用假定在组件中定义的数据属性(例如myLocalDataProperty)。这种情况通常是在mixin被用于共享输入验证时出现的,混合可能会期望一个组件有一个输入值,它将在自己的验证方法中使用。
不过,这可能会引起一些问题。如果我们以后想重构一个组件,改变了mixin需要的变量的名称,会发生什么情况呢?我们在看这个组件时,不会发现有什么问题.linter也不会发现它,我们只会在运行时看到错误。
现在想象一个有很多mixin的组件。我们可以重构本地数据属性吗?或者它会破坏mixin吗?我们得手动搜索才能知道。
<强>
mixin的替代方案,包括高阶组件,实用的方法和其他一些组件组成模式。
mixin的缺点是构成API背后的主要推动因素之一,让我们快速了解一下它是如何工作的,然后再看它如何克服mixin问题。
<强>快速入门构成API
构成API的主要思想的是,我们将它们定义为从新设置的函数返回的JavaScript变量,而不是将组件的功能(例如,方法,计算等)定义为对象属性。
以这个经典的Vue 2组件为例,它定义了一个“计数器”功能:
