混入Mixin

Mixin 用于提取和复用组件间的共有逻辑。

定义 Mixin

const myMixin = {
  data() {
    return { message: 'hello' }
  },
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log(this.message)
    }
  }
}

使用 Mixin

export default {
  mixins: [myMixin]
}

选项合并

数据合并

const mixin = {
  data() {
    return { a: 1, b: 2 }
  }
}

export default {
  mixins: [mixin],
  data() {
    return { b: 3, c: 4 }
  }
}
// 结果: { a: 1, b: 3, c: 4 }

同名数据以组件自身为准。

钩子合并

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

export default {
  mixins: [mixin],
  created() {
    console.log('component')
  }
}
// 两个都会执行

同名钩子会合并为数组，都会执行。

Vue 3 中 Mixin 使用减少，Composition API 是更推荐的复用方式。

要点总结

• Mixin 复用组件选项（data、methods、钩子）
• 数据冲突以组件自身为准
• 同名钩子函数会合并执行
• Vue 3 推荐使用 Composition API 替代