1. 首页
  2. css

CSSVue Composition API如何取代Vue Mixins

希望在Vue组件之间共享代码?如果您熟悉Vue 2,那么您可能已经为此使用了mixin。但是现在作为Vue 2的插件和Vue 3即将推出的特性提供了一个更好的解决方案,我们来看看mixin的缺点,看看compositionapi如何克服这些缺点,并使Vue应用程序具有更大的可伸缩性。mixin简而言之,让我们快速回顾一下mixin模式,因为重要的是要将它放在我们将在下一节中介绍的内容的首位。
通常,Vue组件是由一个JavaScript对象定义,该对象具有表示所需功能的各种属性,如data、methods、computed,等等。
// MyComponent.jsexport default {data:>
When we want to share the same properties between components, we can extract the common properties into a separate module:
// MyMixin.jsexport default {data:>
Now we can add this mixin to any consuming component by assigning it to the mixinconfig属性。在运行时,Vue会将组件的属性与任何添加的mixin合并。
//ConsumingComponent.jsimport导入我的混血儿来自/MyMixin.js公司\”; 导出默认值{mixins:[MyMixin],数据:>
对于此特定示例,运行时使用的组件定义看起来是这样的:
导出默认值{data:>mixin被认为是\”有害的\”
早在2016年年中,Dan Abramov就写过\”Mixins被认为是有害的\”,他认为使用mixin来重用React组件中的逻辑是一种反模式,而是主张远离不幸的是,他提到的React mixin的同样缺点也适用于Vue。让我们先熟悉一下这些缺点,然后再看看合成API如何克服它们。命名冲突
我们看到了mixin模式如何在运行时合并两个对象。如果他们共用一个同名的房产会怎么样?
const=>({myProp:null})}export default{mixins:[mixin],data:>
这就是合并策略发挥作用的地方。这是一组规则,用于确定当一个组件包含多个同名选项时会发生什么情况。
Vue组件的默认(但可选配置)合并策略规定本地选项将覆盖mixin选项。不过也有例外。例如,如果我们有多个相同类型的生命周期钩子,这些钩子将被添加到一个钩子数组中,所有钩子都将被依次调用。
即使我们不应该遇到任何实际的错误,但在跨多个组件和混合体处理命名属性时,编写代码变得越来越困难。一旦第三方mixin被添加为npm包,并且它们自己的命名属性可能导致冲突,这就特别困难了。隐式依赖关系
mixin和使用它的组件之间没有层次关系。这意味着组件可以使用mixin中定义的数据属性(例如,*mySharedDataProperty),但是mixin也可以使用它假定在组件中定义的数据属性(例如,*myLocalDataProperty)。当使用mixin共享输入验证时,通常会出现这种情况。mixin可能希望组件有一个输入值,它将在自己的validate方法中使用该值。
但这可能会导致问题。如果我们以后要重构一个组件并更改mixin需要的变量的名称,会发生什么?我们不会注意到,看看组件,有什么不对劲。一个衣匠也捡不起来。我们只会在运行时看到错误。
现在想象一个组件有一大堆mixin。我们可以重构一个本地数据属性,或者它会破坏一个mixin吗?哪个混音?我们必须手动搜索它们才能知道。从mixins迁移
Dan的文章提供了mixins的替代方案,包括高阶组件、实用方法和一些其他组件组合模式。
虽然Vue在许多方面都类似于React,但他建议的替代模式不能很好地转化为Vue公司。因此,尽管这篇文章是在2016年年中撰写的,但Vue开发人员从那时起就一直受到mixin问题的困扰。
直到现在。mixin的缺点是合成API背后的主要驱动因素之一。在我们研究它如何克服mixin的问题之前,让我们先简要地了解一下它是如何工作的。合成API速成课程
合成API的关键思想是,与其将组件的功能(如状态、方法、计算属性等)定义为对象属性,不如将它们定义为JavaScript从新的setup函数返回的变量。
以定义\”计数器\”功能的Vue 2组件为例:
//计数器.vueexport默认{数据:>
下面是使用组合API定义的完全相同的组件。
//计数器.vueimport{ref,computed}来自\”vue\”; export default{setup(){const=>
您首先会注意到我们导入了一个ref函数,它允许我们需要定义一个与***8***变量功能几乎相同的反应变量。计算函数也是如此。
***9***方法不是被动的,因此可以声明为普通的JavaScript函数。请注意,我们需要更改子属性***10***,以便更改***11***无功变量的值。这是因为使用***12***创建的反应变量需要是对象,以便在传递时保持它们的反应性。
最好查阅Vue Composition API文档,以获得ref工作原理的详细解释。
一旦定义了这些特性,我们就从setup函数返回它们。上面的两个组件在功能上没有区别。我们所做的只是使用替代API。
提示:组合API将是Vue 3的核心功能,但是您也可以在VUE2中使用NPM插件***13***。代码提取
合成API的第一个明显优点是它很容易提取逻辑。
让我们用合成API重构上面定义的组件,以便我们定义的功能在JavaScript模块***14***中。(在功能描述的前面加上\”use\”是一种组合API命名约定。)
//使用计数器.jsimport{ref,computed}来自\”vue\”; export default function(){const=>代码重用
以在组件中使用该功能,我们只需将模块导入组件文件并调用它(注意导入是一个函数)。这将返回我们定义的变量,然后我们可以从设置函数返回这些变量。
***15***
命名冲突将以与任何其他JavaScript变量相同的方式解决。隐式依赖项…已解决!
我们之前也看到了mixin如何使用在消费组件上定义的数据属性,这会使代码变得脆弱且很难推理。
合成函数也可以调用在消费组件中定义的局部变量。不过,不同之处在于,现在必须显式地将此变量传递给组合函数。
从\”./useCompFunction\”导入useCompFunction; 导出默认值{setup(){//组合函数需要的某个局部值useconst=useCompFunction(myLocalVal);}包装混入图案表面看起来很安全。然而,通过合并对象来共享代码成为了一种反模式,因为它增加了代码的脆弱性,并且掩盖了对功能进行推理的能力。
组合API最聪明的部分是它允许Vue依靠内置在本机JavaScript中的保护措施来共享代码,就像向用户传递变量一样函数和模块系统。
这是否意味着组合API在各个方面都优于Vue的经典API?不,在大多数情况下,您可以继续使用经典的API。但是,如果您打算重用代码,那么组合API无疑是优越的

CSSVue Composition API如何取代Vue Mixins 为WP2原创文章,链接:https://www.wp2.cn/css/cssvue-composition-api%e5%a6%82%e4%bd%95%e5%8f%96%e4%bb%a3vue-mixins/