在 Vue 中，我们会遇到同一套方法在该项目很多组件中都会使用到，然后如果在每个组件都写这套方法的话，费时费力，而且如果后期需要对方法进行改动时，也不方便，增加了后期修改、维护的成本。
　　在这里我们可以使用混入来解决这个问题，Vue 官方文档对混入的定义为： Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

使用混入

　　简单来说，混入就是把多个组件共用的属性、方法、生命周期钩子函数封装在一个 js 文件中，然后在使用的时候，再将它引入到组件中。

export default {
  data() {
    return {
      name: 'Tom'
    }
  },
  methods: {
    test() {
      console.log(this.name)
    }
  }
}

　　假如这段代码需要在多个组件中进行使用的话，不使用混入的话，我们需要在每个组件中的 data 和 methods 中都需要写 name 和 test() ，但是如果使用混入，我们可以将这段代码写在一个 js 文件中，然后引入到组件中，然后就可以使用了，这样既可以让我们少写重复代码，也可以让后期的维护、修改成本降低。

import mixin from '@/mixins/mixin'
export default {
  mixins:[mixin],
}

　　我们使用 import 将混入的那个 js 文件引入到组件中，就可以在组件中使用 mixin.js 里面的属性和方法了。

使用注意

命名问题

　　在我们使用混入的时候也需要注意一点，混入中的方法和属性不能和组件内的方法属性名相同。
　　如果混入和组件内的属性方法命名不同的话，那么会将混入里面的属性方法合并到组件内。
　　但是如果使用的命名相同的话，那么会使用组件内的值，混入里面的值会被覆盖掉。

生命周期

　　混入中也是可以写生命周期函数的，在组件内引入混入文件后，生命周期函数也是会进行合并执行的，混入内的方法会先执行。