Mixin合并规则

425 阅读1分钟

Mixin合并规则

Mixin 是什么?

  • 官方定义 :

    Mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

探索后总结出三个点

一、data函数返回值对象

  • 默认情况下会进行合并
  • 返回值对象如果存在冲突,会以组件自身的数据为优先

代码佐证:

在 Mixin 对象中定义了 Message 属性,在 App.vue 中也定义了 Message 属性

darcula-4x.png

darcula-4x (1).png

结果不出意料的会显示 Node.js是世界上最好的语言

二、生命周期钩子函数

  • 钩子函数会被合并到数组中,在合适的时机都会被调用

钩子函数.png

通过代码执行结果也是验证了这个结论,有兴趣可以读vue-next源码,它里面本质就是这样做的。

三、对象类型

  • 如果都有methods选项且定义了实现,那么都会生效
  • 如果对象的key相同,则只会取组件对象的键值对