1. mixin 简介
mixin（混入）是 Vue.js 提供的一种非常实用的组件复用机制。它主要用于抽取组件中可重复使用的代码，以达到高效复用的目的。通过 mixin，我们可以将状态、计算属性、方法等抽离出来，将代码复用性提高到一个新的层次。
2. mixin 的使用场景
我们通常使用 mixin 来抽取组件中非私有的代码，包括数据、计算属性、方法等。它适用于以下场景：
2.1 存在多个组件需要共享逻辑代码
在实际开发中，我们常常会遇到多个组件需要共享相同逻辑代码的情况。此时，我们可以将这些逻辑代码抽离出来，通过 mixin 的方式来实现多个组件之间的逻辑复用。
2.2 构建可插拔的功能
使用 mixin，可以构建可插拔的功能，以便在多个组件中复用。比如，我们可以将一个通用的数据提交逻辑抽离出来，作为一个 mixin，在需要提交数据的组件中进行引入并复用。
3. mixin 的实现方式
实现 mixin 的方式有两种，一种是全局 mixin，另一种是局部 mixin。全局 mixin 会影响所有的组件，而局部 mixin 只会影响到当前组件。
3.1 全局 mixin 的实现方式
全局 mixin 是通过 Vue.mixin() 方法来实现的。全局 mixin 会影响到所有的组件，因此需要慎重使用。
Vue.mixin({
methods: {
foo: function () {
console.log('global mixin')
}
}
})
3.2 局部 mixin 的实现方式
局部 mixin 适用于只想在当前组件中使用 mixin 的情况。可以通过 mixins 属性来引入 mixin。
var myMixin = {
methods: {
foo: function () {
console.log('local mixin')
}
}
}
new Vue({
mixins: [myMixin]
})
4. mixin 的注意点
在使用 mixin 时，我们需要注意以下几点：
4.1 命名冲突
如果一个组件和 mixin 中包含了同名的选项，那么会优先使用组件选项中的内容。如果我们想访问 mixin 中的选项，可以通过 \$options 对象来访问。
var mixin = {
methods: {
foo: function () { console.log('foo from mixin') }
}
}
new Vue({
mixins: [mixin],
methods: {
foo: function () { console.log('foo from component') }
},
created: function () {
// 输出 'foo from component'
this.foo()
// 输出 'foo from mixin'
this.\$options.mixins[0].methods.foo.call(this)
}
})
4.2 数据来源
Vue.js 在合并 mixin 的时候，会依次执行 mixin 中的选项，并且每个 mixin 中的选项都会在组件选项之前被执行。因此，如果在组件和 mixin 中，都定义了一个相同的数据选项，那么组件中的数据会覆盖 mixin 中的数据。
4.3 生命周期钩子
如果组件和 mixin 中包含相同的生命周期钩子函数，那么会按照顺序依次执行。mixin 中先定义的生命周期钩子会先被调用，如果存在相同的钩子函数，则组件生命周期钩子会覆盖 mixin 中的生命周期钩子。
5. 示例
我们在组件中使用 mixin 来实现有状态组件的复用。具体实现步骤如下：
5.1 定义 mixin
首先，我们定义一个 mixin，用于实现计算属性、监听事件等。
let mixin = {
computed: {
filteredList: function () {
let tempItems = this.items.filter(item => {
return item.name.toLowerCase().indexOf(this.search.toLowerCase()) !== -1
})
return tempItems.slice(0, this.limit)
}
},
methods: {
loadMore: function () {
this.limit += 3
}
},
data () {
return {
search: '',
limit: 3
}
}
}
5.2 引入 mixin
在组件中引入 mixin，通过 mixins 属性来引入，多个 mixin 可以用数组的形式进行传参。
import myMixin from './myMixin'
export default {
name: 'ComponentA',
mixins: [myMixin],
data () {
return {
items: [
{ name: 'apple', price: 1 },
{ name: 'banana', price: 2 },
{ name: 'orange', price: 3 },
{ name: 'pear', price: 4 },
{ name: 'watermelon', price: 5 }
]
}
}
}
5.3 使用 mixin 中的选项
引入 mixin 后，我们可以在组件中使用 mixin 中的选项，比如使用 filteredList 方法。
<template>
<div>
<input v-model="search" placeholder="Search...">
<li v-for="item in filteredList" :key="item.name">
<span>{{ item.name }}</span>
<span>{{ item.price }}</span>
</li>
<button @click="loadMore">load more</button>
</div>
</template>
6. 总结
mixin 是 Vue.js 提供的一种非常实用的组件复用机制，通过 mixin，我们可以将状态、计算属性、方法等抽离出来，将代码复用性提高到一个新的层次。在使用 mixin 的时候，我们需要注意命名冲突、数据来源、生命周期钩子等方面。在实际开发中，我们可以将一些通用的逻辑代码，通过 mixin 的方式来实现多个组件之间的逻辑复用，以提高代码复用性和开发效率。