mixin 是什么？

mixin 是混入对象，该对象中可以拥有 .vue 组件script标签中的所有东西，例如可以拥有 data 函数、methods对象、生命周期钩子函数等

/* 我是一个 mixin 对象 */
export default {
   data() {
       return {
          uname:'peet',
          age:18
       }
    },
    methods: {
        goHome() {
          // dosomething
        }
    },
    created() {
         // dosomething
    }
}

mixin 解决了什么问题？

如果不同组件都使用了相同的变量、方法等，可以将这些变量、方法抽离，并放入mixin对象，从而减少重复代码，更加灵活的分发组件的可复用功能

mixin 如何使用？

1. 首先在mixin文件夹中新建 index.js

2. 将需要复用的变量、方法等放入 index.js，并向外导出（export）

3. 如果是某个组件需要使用，在该组件中局部注册 mixin。然后，在该组件中，你可以直接使用 mixin 中的变量、方法，无需单独触发它们

// 1. 导入mixin
import mixs from '@/mixin/index.js'

export default {
  name: 'Login',
  
  // 2. 局部注册 mixin ，以数组形式，数组成员mixs是变量
  mixins: [mixs],
  
  // 3. 在该组件中，直接使用mixin中的变量、方法，无需单独触发它们
  created() {
      this.goHome()
   }
  // blablabla...
 }

4. 如果是全局使用，在main.js中全局注册 mixin

    // 1. 导入 mixin
    import mixs from '@/mixin/index.js'
    // 2. 全局注册 mixin
    Vue.mixin(mixs)

mixin 使用注意事项？

1. 变量合并

当 .vue 组件的data()函数中的变量，会与 mixin混入对象的data()函数中的变量合并，如果变量名不同，组件会增加新的变量；如果变量名相同 .vue 组件中的变量值会 覆盖 mixin中的变量值

2. 钩子函数合并

.vue 组件 和 mixin混入对象中的同名钩子函数会合并。但是，mixin混入对象的钩子函数会被先调用，而在 .vue 组件的钩子函数随后才被调用

3. 谨慎使用全局mixin

一旦使用全局混入，它将影响每一个之后创建的 Vue 实例