Vue.mixin({})的使用场景和原理

mixin提供了一种非常灵活的方式来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时所有混入对象的选项将被“混合”进入该组件本身的选项。使用场景用于抽离一个公共的业务逻辑实现复用。缺陷可能会导致混入的属性名和组件属性名发生命名冲突数据依赖的来源问题示例// 定义一个混入对象 var myMixin { created: function () { this.hello() }, methods: { hello: function () { console.log(hello from mixin!) } } } // 定义一个使用混入对象的组件 var Component Vue.extend({ mixins: [myMixin] }) var component new Component() // hello from mixin!选项合并当组件和混入对象含有同名选项时这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组因此都将被调用。另外混入对象的钩子将在组件自身钩子之前调用。值为对象的选项例如methods、components和directives将被合并为同一个对象。两个对象键名冲突时取组件对象的键值对。全局混入它将影响每一个之后创建的 Vue 实例。原理export function mergeOptions ( parent: Object, child: Object, vm?: Component ): Object { // some code if (!child._base) { if (child.extends) { parent mergeOptions(parent, child.extends, vm) } if (child.mixins) { for (let i 0, l child.mixins.length; i l; i) { parent mergeOptions(parent, child.mixins[i], vm) } } } // 递归遍历合并组件和混入的属性 const options {} let key for (key in parent) { mergeField(key) } for (key in child) { if (!hasOwn(parent, key)) { mergeField(key) } } function mergeField (key) { const strat strats[key] || defaultStrat options[key] strat(parent[key], child[key], vm, key) } return options }