Vue3 mixins 属性（完整教程）

Vue3 mixins 属性核心概念

mixins 是 Vue 3 中用于复用组件逻辑的机制，本质是对象合并的配置模块。当多个组件需要共享相同功能时，通过 mixins 属性直接注入组件选项，实现代码复用（如：数据计算、生命周期方法等）。Vue 3 的 mixins 保留了 Vue 2 的合并策略，但需要结合 Composition API 的 useXXX 钩子使用更优雅。

基础语法与使用方式

### 引入单个mixin

// mixin.js
export const commonMixin = {
  data() {
    return {
      sharedData: '公共数据'
    }
  },
  methods: {
    sharedMethod() {
      console.log('公共方法', this.sharedData) // this指向组件实例
    }
  }
}

// 组件中使用
import { commonMixin } from './mixin'
export default {
  mixins: [commonMixin],
  mounted() {
    this.sharedMethod() // 直接调用公共方法
  }
}

### 多个mixins合并

import { commonMixin } from './mixin'
import { paginationMixin } from './mixin'
export default {
  mixins: [commonMixin, paginationMixin], // 支持多个mixin并行注入
  methods: {
    localMethod() {
      this.sharedMethod() // 同名方法会覆盖
      this.mixinPageMethod() // 需要确保命名唯一
    }
  }
}

进阶特性与行为解析

### 生命周期钩子合并

Vue 3 会自动将多个 mixin 中的生命周期方法合并执行：

const hookMixin = {
  created() {
    console.log('mixin created') // 先执行mixin的created
  }
}
export default {
  mixins: [hookMixin],
  created() {
    console.log('component created') // 后执行组件的created
  }
}

### 选项冲突处理规则

### 与Composition API结合

// compositionMixin.js
export const useCommon = () => {
  const sharedRef = ref('组合式公共数据')
  const sharedFn = () => {
    console.log('组合式公共方法', sharedRef.value)
  }
  return { sharedRef, sharedFn }
}

// 组件中使用
import { useCommon } from './compositionMixin'
export default {
  setup() {
    const { sharedRef, sharedFn } = useCommon()
    sharedFn() // 通过解构调用公共逻辑
  }
}

实战应用场景

### 全局权限验证模块

export const authMixin = {
  computed: {
    hasPermission() {
      return () => { 
        // 调用权限验证服务
        return true 
      }
    }
  },
  mounted() {
    if (!this.hasPermission()) {
      this.$router.push('/unauthorized') // 路由跳转
    }
  }
}

### 数据格式化处理

export const formatMixin = {
  methods: {
    currency(value) {
      return `¥${value.toFixed(2)}` // 价格格式化
    },
    date(value) {
      return new Date(value).toLocaleDateString() // 日期格式化
    }
  }
}

注意事项与最佳实践

• ❌ 避免在 mixin 中定义组件专用逻辑（数据污染）
• ⚠️ 同名方法优先级：组件 > mixin > 父组件
• ✅ 优先使用具名导出（export const name）避免模块合并冲突
• ✅ 重要功能添加命名空间前缀（如mixin_）避免方法重名
• ✅ 对于复杂逻辑推荐使用 Composition API 替代（更易维护）