mixin合并策略

含义:

        mixin是一种Vue组件选项,它允许我们定义一些可重用的组件选项,并在多个组件中进行混合。这是一个强大的工具,特别适用于在不同组件之间共享相似的逻辑。

使用场景:

  1. 共享通用逻辑:当多个组件需要共享相同的方法、数据或计算属性时,使用mixin是一个不错的选择。例如,你可以创建一个mixin来处理表单验证或动画效果,然后在多个组件中混合使用它。
  2. 增强组件:你可以使用mixin来增强已有的组件,而不必修改它们的源代码。这对于第三方组件或库的定制非常有用。

与extends的不同:

        是另一种Vue组件选项,它允许你创建一个新组件,该组件继承另一个组件的所有选项。

  • 创建新组件:当你想要基于一个现有组件创建一个新组件,并且希望新组件继承原始组件的所有选项时,使用extends是一个很好的选择。这可以帮助你避免重复编写相似的代码。

  • 覆盖特定选项:如果你需要对继承的组件进行一些特定的更改,例如修改数据属性或方法,你可以使用extends并在新组件中重新定义这些选项,以覆盖原始组件的定义。

mixin合并策略有一些细节需要注意: 

  1. 当组件和mixin含有同名选项时,这些选项将以恰当的方式在Vue.extend()里最终选择使用相同的选项合并逻辑合并,并在发生冲突时以组件数据优先。
  2. 对于钩子函数,mixin中的钩子将在组件自身钩子之前调用。
  3. mixin和组件中存在相同方法时,组件的方法优先级大于mixin中,也就是说,mixin中的方法会被组件中的方法覆盖掉,不执行。
  4. 多个组件调用同一个mixin时,每个变量都是单独独立的,不会影响其他组件。
  5. 使用mixin时要注意避免全局混入,因为这会影响每个单独创建的Vue实例(包括第三方组件)。

具体合并策略如下:

  1. data: mixins中的data会合并到data中,有冲突的话,data中数据覆盖mixins中的数据。全局存在的话,全局的权重最低。
    组件 -> mixin -> mixin-mixin -> 全局 mixin
  2. provide:与data一致。
    组件 -> mixin -> mixin-mixin -> 全局 mixin
  3. 钩子函数: mixins中的钩子函数也会执行,先执行mixins中的钩子函数。全局存在的话,全局的权重最高。
    全局 mixin -> mixin-mixin -> mixin -> 组件
  4. component、directives、filters: 有冲突时,组件component、directives、filters会覆盖mixins中的。他们是通过原型链的方式不会相互覆盖,而是 权重小 被放到 权重大 的原型上
    组件 -> mixin -> mixin-mixin -> 全局 mixin
  5. watch:与钩子函数一致。
    全局 mixin -> mixin-mixin -> mixin -> 组件
  6. props、computed、methods、inject:简单的对象合并,key 值相同,优先级高的覆盖优先级低的。
    组件 -> mixin -> mixin-mixin -> 全局 mixin
  7. el、template、propData:组件 -> mixin -> mixin-mixin -> 全局 mixin

混入的方式:

  • 函数叠加混入(data、provide)
  • 数组叠加混入(hook、watch)
  • 原型链叠加混入(components,filters,directives)
  • 对象覆盖混入(props,methods,computed,inject )
  • 替换覆盖混入(el,template,propData)

优点:

  • 提高代码复用性
  • 无需传递状态
  • 维护方便,只需要修改一个地方即可

 缺点:

  • 命名冲突
  • 滥用的话后期很难维护
  • 不好追溯源,排查问题稍显麻烦
  • 不能轻易的重复代码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值