什么是Vue.js的Mixin？如何使用Mixin？

Vue.js 的 Mixin 是一种分发 Vue 组件中可复用功能的灵活方式。一个 Mixin 可以包含任意组件选项。当组件使用一个 Mixin 时,所有 Mixin 的选项将被“混合”进入该组件的最终选项中。
我们可以使用 Mixin 来分发数据,计算属性,监听器,方法等等。这些选项将被合并到组件的最终选项中。

使用 Mixin 的示例代码:

js
// 定义一个 Mixin
const myMixin = {
  methods: {
    foo() { ... }
  },
  created() { ... },
  computed: {
    bar() { ... }
  } 
}

// 使用 Mixin
var Component = {
  mixins: [myMixin],
  // ...
}

Component 组件可直接使用 myMixin 中定义的方法、生命周期钩子和计算属性。

Mixin 可以像普通的 JavaScript 对象一样包裹数据并将选项混入组件中。同时,Mixin 也可以依次混入多个 Mixin:

js
var mixin1 = { ... }
var mixin2 = { ... }

var Component = {
  mixins: [mixin1, mixin2],
  // ...  
}

Mixin 的选项将按照 mixins 数组的顺序进行合并。如果有重复的选项,以最后一个 Mixin 的选项为准。

Mixin 的一些使用注意点:

1. Mixin 应该具有高内聚和低耦合,避免相互依赖。
2. Mixin 可能会造成命名冲突,应谨慎使用。
3. 不推荐使用过多的 Mixins,这会使得组件的选择项变得很模糊。
4. Mixins 中的编译阶段选项(data,el,template,render等)仅在组件自身没有相同选项时起作用。