vue2中的mixin

1、什么是Mixin混入：

混入（Mixin）是 Vue.js 中用于复用部分组件逻辑的一种技术。通过混入，你可以将组件的方法，生命周期钩子，甚至 data 都进行复用。

混入的基本工作原理是把一个特定的对象“混入”到另外一个对象之中，如方法，组件选项等。它允许你写出可复用的代码并且可以插入到Vue实例中，或者本地组件中。

举个例子，如果你有一些组件，他们都需要在创建时（created钩子）请求数据，那么你就可以把这个请求的逻辑写进一个混入的对象中。然后在需要请求数据的组件中引入这个混入对象，这些组件就会拥有相同的创建逻辑。

同样的，如果你想让许多组件有相同的方法，也可以将它们写入混入对象，然后将这个混入对象引入至你的组件中。这样就可以减少重复代码，提高代码复用性。

在 Vue2 中，可以使用 Vue.mixin() 方法来全局注册混入，也可以在单个 Vue 组件中使用mixins选项来使用混入。

要注意的是，混入对象的钩子将在组件自身钩子之前调用。而在遇到同名选项时，比如 methods、components或者 props，混入对象的选项会被合并到组件的选项中。对于同名的方法，混入的方法会在组件的方法之前调用。

2、使用场景：

当在多个组件中有相同的业务逻辑时，可以使用mixin，在mixin中定义这些公共的逻辑，然后在需要的组件中引入，在全局引入的时候可以用Vue.mixin，局部引入可以在组件的mixins选项中声明。
混入可以避免组件之间大量重复相同的方法或者逻辑代码，把这些公共的方法或者逻辑代码抽离出来，定义为一个混入对象，在不同的组件中调用，从而实现代码重用。

以下是一些可能会使用混入的场景：

1. 数据格式化：通常我们可能需要在多个组件中实现对某一类型的数据进行格式化，可以通过mixin编写一个统一的数据格式化方法并混入各个组件中。

let formatMixin = {
    methods: {
        formatData(data) {
            // 实现数据格式化逻辑
        }
    }
}
export default formatMixin;

然后在需要使用的组件中，使用import引入即可。

1. 功能复用：例如我们在多个视图组件中都需要实现类似的滚动加载，可以通过mixin编写一段通用的滚动加载逻辑并混入。

let scrollMixin = {
    directives: {
        'scroll-more': {
            bind: (el, binding) => {
                let callback = binding.value;
                el.addEventListener('scroll', () => {
                    if (el.scrollHeight - el.scrollTop - el.clientHeight < 10) {
                        callback();
                    }
                })
            }
        }
    }
}
export default scrollMixin;

1. 对外提供插件或工具：例如我们要编写一套跨项目使用的输入验证工具，我们可以通过mixin封装我们的验证逻辑并对外发布，让其他项目在使用时可以以混入的方式获得输入验证的能力。

每个组件使用 mixin 时，mixins 选项接收一个混入对象的数组。

import MyPlugin from 'my-plugin'
export default {
  mixins: [MyPlugin],
  // ...
}

需要注意的是，当组件和混入对象含有同名选项时，这些选项将以适当的方式进行“合并”。像 data，methods，components，directives 等选项的合并，采取的策略是：同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。像 data 这样的对象选项，应当以组件的数据优先。

3、使用步骤：

以下是在 Vue2 中使用mixin的主要步骤：

• 首先，我们需要创建一个 mixin对象。mixin 对象可以包含任何组件选项。当组件使用了这个 mixin 对象时，所有的 mixin 对象选项将被“混入”到这个组件的选项中。

示例：

//创建一个mixin
var myMixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  },
  methods: {
    showMessage: function () {
      alert(this.message);
    }
  }
}

• 接下来，我们可以在一个组件中使用这个 mixin。用 Vue 的 mixins 选项让组件使用这个 mixin。如此一来，组件就得到了 mixin 中的数据和方法。

示例：

var Component = Vue.extend({
  mixins: [myMixin]
})

这样，Component 实例就可以直接使用 myMixin 中定义的数据和方法了。

需要注意的是，当发生冲突时（即组件和混入对象含有同名选项），会有一些规则：

• 数据对象：在冲突的情况下，组件数据优先级高于mixin。

• 生命周期函数：不论是 Vue 的生命周期钩子还是自定义钩子，两者都会被调用。而且 mixin 的钩子在组件自己的钩子之前调用。

• 选项合并：Vue.js 使用自定义的合并策略来合并 methods, components 和 directives等。如果组件与混入对象有冲突，则组件选项优先级较高。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

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

// => "混入对象的钩子被调用"
// => "组件的钩子被调用"

4、与vuex的区别：

vuex是Vue的状态管理工具，它采用集中式存储管理应用的状态，适用于大型应用，mixin更多的是解决不同组件之间逻辑复用的问题，适用于任何类型的应用。

5、与公共组件的区别：

mixin是一种抽象出通用逻辑代码的手段，对于某些类似的逻辑或者相同的逻辑，只编写一次，可以分发到各个组件中，可以减少代码冗余，公共组件则是一个具体的、可视的代码片段，可以直接使用。例如，你可能会拥有一页公共头部、页脚或者侧边栏。