1.基本概念

混入 (Mixins) 是 Vue 2 中用于组件代码复用的重要特性，它允许你将可复用的功能分发到多个组件中。
混入是一种灵活的代码复用方式，可以包含任意组件选项（data、methods、生命周期钩子等）。当组件使用混入时，所有混入的选项将被"混合"到组件自身的选项中。

2.创建和使用混入

2.1 创建混入对象

// myMixin.js
export const myMixin = {
  data() {
    return {
      mixinData: '这是混入的数据'
    }
  },
  created() {
    console.log('混入的created钩子被调用')
  },
  methods: {
    mixinMethod() {
      console.log('这是混入的方法')
    }
  }
}

2.2 局部混入使用

import { myMixin } from './myMixin.js'

export default {
  mixins: [myMixin],
  created() {
    console.log('组件的created钩子被调用')
    this.mixinMethod() // 调用混入的方法
    console.log(this.mixinData) // 访问混入的数据
  }
}

2.3 全局混入

// main.js
import Vue from 'vue'
import { myMixin } from './myMixin.js'

Vue.mixin(myMixin) // 全局注册，会影响之后创建的每个Vue实例

3.选项合并策略

数据对象 (data)
同名属性会进行递归合并，组件的数据优先：

const mixin = {
  data() {
    return {
      message: '混入的消息',
      foo: 'bar'
    }
  }
}

new Vue({
  mixins: [mixin],
  data() {
    return {
      message: '组件的消息',
      baz: 'qux'
    }
  },
  created() {
    console.log(this.$data)
    // { message: "组件的消息", foo: "bar", baz: "qux" }
  }
})

生命周期钩子
同名钩子函数将合并为数组，混入的钩子先调用：

const mixin = {
  created() {
    console.log('混入的created')
  }
}

new Vue({
  mixins: [mixin],
  created() {
    console.log('组件的created')
  }
})
// 输出顺序:
// 混入的created
// 组件的created

方法、组件和指令等
同名方法/组件/指令将被合并，组件的方法优先：

const mixin = {
  methods: {
    foo() {
      console.log('混入的foo')
    },
    conflicting() {
      console.log('来自混入')
    }
  }
}

new Vue({
  mixins: [mixin],
  methods: {
    bar() {
      console.log('组件的bar')
    },
    conflicting() {
      console.log('来自组件')
    }
  },
  created() {
    this.foo() // "混入的foo"
    this.bar() // "组件的bar"
    this.conflicting() // "来自组件"
  }
})

4.注意事项