含义:
mixin
是一种Vue组件选项,它允许我们定义一些可重用的组件选项,并在多个组件中进行混合。这是一个强大的工具,特别适用于在不同组件之间共享相似的逻辑。
使用场景:
- 共享通用逻辑:当多个组件需要共享相同的方法、数据或计算属性时,使用
mixin
是一个不错的选择。例如,你可以创建一个mixin
来处理表单验证或动画效果,然后在多个组件中混合使用它。 - 增强组件:你可以使用
mixin
来增强已有的组件,而不必修改它们的源代码。这对于第三方组件或库的定制非常有用。
与extends的不同:
是另一种Vue组件选项,它允许你创建一个新组件,该组件继承另一个组件的所有选项。
-
创建新组件:当你想要基于一个现有组件创建一个新组件,并且希望新组件继承原始组件的所有选项时,使用
extends
是一个很好的选择。这可以帮助你避免重复编写相似的代码。 -
覆盖特定选项:如果你需要对继承的组件进行一些特定的更改,例如修改数据属性或方法,你可以使用
extends
并在新组件中重新定义这些选项,以覆盖原始组件的定义。
mixin合并策略有一些细节需要注意:
- 当组件和mixin含有同名选项时,这些选项将以恰当的方式在Vue.extend()里最终选择使用相同的选项合并逻辑合并,并在发生冲突时以组件数据优先。
- 对于钩子函数,mixin中的钩子将在组件自身钩子之前调用。
- mixin和组件中存在相同方法时,组件的方法优先级大于mixin中,也就是说,mixin中的方法会被组件中的方法覆盖掉,不执行。
- 多个组件调用同一个mixin时,每个变量都是单独独立的,不会影响其他组件。
- 使用mixin时要注意避免全局混入,因为这会影响每个单独创建的Vue实例(包括第三方组件)。
具体合并策略如下:
- data: mixins中的data会合并到data中,有冲突的话,data中数据覆盖mixins中的数据。全局存在的话,全局的权重最低。
组件 -> mixin -> mixin-mixin -> 全局 mixin - provide:与data一致。
组件 -> mixin -> mixin-mixin -> 全局 mixin - 钩子函数: mixins中的钩子函数也会执行,先执行mixins中的钩子函数。全局存在的话,全局的权重最高。
全局 mixin -> mixin-mixin -> mixin -> 组件 - component、directives、filters: 有冲突时,组件component、directives、filters会覆盖mixins中的。他们是通过原型链的方式不会相互覆盖,而是 权重小 被放到 权重大 的原型上
组件 -> mixin -> mixin-mixin -> 全局 mixin - watch:与钩子函数一致。
全局 mixin -> mixin-mixin -> mixin -> 组件 - props、computed、methods、inject:简单的对象合并,key 值相同,优先级高的覆盖优先级低的。
组件 -> mixin -> mixin-mixin -> 全局 mixin -
el、template、propData:组件 -> mixin -> mixin-mixin -> 全局 mixin
混入的方式:
- 函数叠加混入(data、provide)
- 数组叠加混入(hook、watch)
- 原型链叠加混入(components,filters,directives)
- 对象覆盖混入(props,methods,computed,inject )
- 替换覆盖混入(el,template,propData)
优点:
- 提高代码复用性
- 无需传递状态
- 维护方便,只需要修改一个地方即可
缺点:
- 命名冲突
- 滥用的话后期很难维护
- 不好追溯源,排查问题稍显麻烦
- 不能轻易的重复代码