Vue2迁移Vue3：如何在Setup API中使用组件Mixins

1. Options API组件中直接沿用Vue2写法 #

Vue3的Options API完全兼容Vue2的mixins配置方式，直接在组件选项的mixins数组中添加你的mixin对象即可，和你原来的Vue2代码逻辑一致。

先定义一个示例mixin：

// 示例mixin文件：modalMixin.js
export default {
  data() {
    return {
      isModalVisible: false
    }
  },
  methods: {
    toggleModal() {
      this.isModalVisible = !this.isModalVisible
    }
  },
  mounted() {
    console.log('Mixin的mounted钩子执行')
  }
}

然后在你的Modal组件中引入并配置：

import Loader from './Loader.vue'
import modalMixin from './modalMixin.js'

export default {
  name: "Modal",
  components: { Loader },
  // 把mixin加入数组即可
  mixins: [modalMixin]
}

组件会自动继承mixin里的data、方法、生命周期钩子，执行逻辑和Vue2完全一致——组件自身的同名选项会覆盖mixin，生命周期钩子则会先执行mixin里的，再执行组件自身的。

2. 用组合式函数替代Mixins（Vue3推荐方案） #

如果你的组件已经迁移到<script setup>的Composition API，Vue官方更推荐用**组合式函数（Composables）**替代mixins，能避免mixins带来的命名冲突、逻辑来源模糊等问题。

把上面的mixin逻辑改成组合式函数：

// 组合式函数文件：useModal.js
import { ref, onMounted } from 'vue'

export function useModal() {
  const isModalVisible = ref(false)
  
  const toggleModal = () => {
    isModalVisible.value = !isModalVisible.value
  }

  onMounted(() => {
    console.log('Modal逻辑的mounted钩子执行')
  })

  // 返回需要在组件中使用的变量和方法
  return {
    isModalVisible,
    toggleModal
  }
}

然后在组件中使用：

<script setup>
import Loader from './Loader.vue'
import { useModal } from './useModal.js'

// 调用组合式函数，直接获取需要的逻辑
const { isModalVisible, toggleModal } = useModal()
</script>

这种方式逻辑来源清晰，还能通过参数定制逻辑，比mixins更灵活可控。

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