vue TS 实现mixin

在 Vue 3 中结合 TypeScript 实现 Mixin 可以通过多种方式完成。以下是几种常见的方法：

使用 defineComponent 和 extends

// 定义 Mixin
const myMixin = {
  data() {
    return {
      mixinData: 'Mixin Data'
    }
  },
  methods: {
    mixinMethod() {
      console.log('Mixin Method')
    }
  }
}

// 使用 Mixin
import { defineComponent } from 'vue'

export default defineComponent({
  extends: myMixin,
  data() {
    return {
      componentData: 'Component Data'
    }
  },
  methods: {
    componentMethod() {
      this.mixinMethod() // 调用 Mixin 方法
      console.log(this.mixinData) // 访问 Mixin 数据
    }
  }
})

使用 mixins 选项（Vue 2 兼容方式）

import { defineComponent } from 'vue'

const myMixin = defineComponent({
  data() {
    return {
      mixinData: 'Mixin Data'
    }
  },
  methods: {
    mixinMethod() {
      console.log('Mixin Method')
    }
  }
})

export default defineComponent({
  mixins: [myMixin],
  data() {
    return {
      componentData: 'Component Data'
    }
  },
  methods: {
    componentMethod() {
      this.mixinMethod()
      console.log(this.mixinData)
    }
  }
})

使用 Composition API 实现类似 Mixin 的功能

import { defineComponent, ref } from 'vue'

// 创建可复用的逻辑
function useMixin() {
  const mixinData = ref('Mixin Data')
  const mixinMethod = () => {
    console.log('Mixin Method')
  }
  return { mixinData, mixinMethod }
}

export default defineComponent({
  setup() {
    const { mixinData, mixinMethod } = useMixin()
    const componentData = ref('Component Data')

    const componentMethod = () => {
      mixinMethod()
      console.log(mixinData.value)
    }

    return { 
      mixinData,
      componentData,
      componentMethod
    }
  }
})

类型安全的 Mixin

import { defineComponent } from 'vue'

// 定义 Mixin 类型
interface MyMixinInterface {
  mixinData: string
  mixinMethod: () => void
}

const myMixin = {
  data(): { mixinData: string } {
    return {
      mixinData: 'Mixin Data'
    }
  },
  methods: {
    mixinMethod(this: MyMixinInterface) {
      console.log(this.mixinData)
    }
  }
}

// 组件中使用
export default defineComponent({
  mixins: [myMixin],
  data() {
    return {
      componentData: 'Component Data'
    }
  },
  methods: {
    componentMethod(this: MyMixinInterface & { componentData: string }) {
      this.mixinMethod()
      console.log(this.componentData)
    }
  }
})

注意事项

Vue 3 官方推荐使用 Composition API 代替 Mixin，因为 Composition API 提供了更好的类型支持和代码组织方式。

Mixin 可能会导致命名冲突和隐式依赖问题，使用时需要谨慎。

对于大型项目，可以考虑使用自定义 Hook（类似 React 的 Hook）来替代 Mixin。