Vue3中是否可使用mixin函数？Composition API能否实现同等功能？

Vue3 对 mixin 的支持 #

Vue3 完全支持传统 Options API 体系下的 mixin 能力，你提到的「从外部文件导入抽离的公共脚本逻辑实现复用」的用法完全可用，全局混入app.mixin()、组件级mixins配置项都做了保留。
举个最常见的用法示例：

// 抽离的公共logMixin.js
export default {
  mounted() {
    console.log('组件已挂载，组件名：', this.$options.name)
  },
  methods: {
    printLog(msg) {
      console.log('[组件日志]', msg)
    }
  }
}

在组件中引入注册即可直接使用mixin内的所有生命周期、方法、响应式数据：

<script>
import logMixin from './logMixin.js'
export default {
  name: 'UserCard',
  mixins: [logMixin],
  mounted() {
    this.printLog('用户卡片组件自身的挂载逻辑执行')
  }
}
</script>

不过要注意，Vue3 官方已经不再将 mixin 作为推荐的逻辑复用方案，mixin 本身存在的命名冲突、属性来源不透明、逻辑嵌套后难以追溯、类型支持差的问题在Vue3中依然存在。

Composition API 的逻辑复用能力 #

Composition API 不仅可以完全覆盖 mixin 的所有复用场景，还从设计层面解决了mixin的固有缺陷，是Vue3官方首推的逻辑复用方案。
和前面mixin逻辑完全等价的Composition API实现，一般以「组合式函数（Composable）」的形式抽离：

// 抽离的公共useLog.js
import { onMounted, getCurrentInstance } from 'vue'
export function useLog() {
  const currentIns = getCurrentInstance()
  function printLog(msg) {
    console.log('[组件日志]', msg)
  }
  onMounted(() => {
    console.log('组件已挂载，组件名：', currentIns.type.name)
  })
  return {
    printLog
  }
}

组件中引入即可使用，不管是<script setup>语法还是普通的Composition API写法都兼容：

<script setup>
import { onMounted } from 'vue'
import { useLog } from './useLog.js'
const { printLog } = useLog()
onMounted(() => {
  printLog('用户卡片组件自身的挂载逻辑执行')
})
</script>

相比传统mixin，Composition API做逻辑复用上有几个明显优势：

• 不存在隐式命名冲突：导入的方法、变量由使用者自主命名，出现重名时编辑器会直接给出提示，不会像mixin那样出现生命周期、方法被静默覆盖的问题
• 逻辑来源完全透明：所有用到的方法、属性都可以直接追溯到对应的导入来源，排查问题时不用在多个mixin文件里来回翻找某个this上的属性到底来自哪里
• 灵活度更高：组合式函数支持接收参数、不同复用逻辑之间可以互相调用，抽离复杂交叉逻辑时不会像mixin那样容易出现逻辑耦合混乱的问题
• 天然对TypeScript类型支持友好，不需要额外写复杂的类型声明就能获得完整的类型推断

实际项目开发里，如果是Vue2升级到Vue3的存量项目，原有mixin不需要强制重构，可以继续正常运行；如果是全新开发的项目，优先用Composition API抽离复用逻辑即可，开发和维护体验会比mixin好很多。

内容的提问来源于stack exchange，提问作者ew2