mixin【vue 知识汇点8】

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

var myMixin = {
	created: function() {
    	this.hello();
    },
    methods: {
    	console.log('hello from mixin!')
    }
}

选项合并

当组件和混入对象含有同名选项时，这些选项会以恰当的方式进行合并，比如：

• 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
• 值为对象的选项，例如methods、components、directives, 都将合并为同一个对象，如果键名冲突，取组件对象的键值对
• 同名钩子函数将合并为一个数组，因此都将被调用

  var mixin = {
  	 created: function() {
    	console.log('mixin')
    }
  }
  new Vue({
  	 mixins: [mixin],
    created: function() {
    	console.log('组件钩子被调用')
    }
  })
  // mixin
  // 组件钩子被调用
  

全局混入

混入也可以全局注册。一旦全局混入，它将影响每一个之后创建的Vue 实例

自定义选项合并策略

如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数

mixin 特点

• 方法和参数在各组件中不共享：如果A组件中改变了某个混入的值，在B组件中获取这个值，还是初始值，数据不共享。
• 值为对象的属性，比如methods、components等，选项会合并，组件的同名键会覆盖 mixin 的
• 值为函数的选项，如 从created、mounted等，会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用。
• 与 vuex 的区别：
  • vuex 是做状态管理的，里面定义的变量每个组件都可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之改变
  • mixins：可以定义共用的变量，在每个组件中使用，引入组件之后，各个变量是独立的，值的修改在组件中不会互相影响
• 与公共组件的区别：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，本质上两者是独立的。

vue 中为什么不推荐使用高阶组件

vue 不推荐高阶组件，而是使用 mixins 的形式实现功能的复用，因为 vue 高阶组件带来的收益跟直接使用 mixins 带来的收益差不多。