在 Vue 2 中，mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留了 mixins 支持，但对于组件间的逻辑复用，使用组合式 API 的组合式函数是现在更推荐的方式。

最近在vue2迁移到vue3的项目中，对mixin的使用进行了改造，介绍一下使用方法。

1、创建mixin

新建一个user.js文件，写入要mixin的方法和数据，示例代码如下。

import {
  ref,
  watch,
  onMounted
} from 'vue'
export default function () {
  const mData = ref(null)
  onMounted(() => {
    getData()
  })
  watch(() => data, (newVal, oldVal) => {
    console.log('watch', newVal, oldVal)
  }, {
    deep: true
  })
  const getData = () => {
    mData.value = {
        name: 'lily',
        age: 10
    }
  }

  // 暴露出去
  return {
    mData,
    getData
  }
}

2、使用mixin

在需要使用mixin的组件中，导入user.js。

<template>
    <div class="box">
        {{mData.name}}
    </div>
</template>

<script setup>
import { ref} from 'vue'
// 导入
import userMix from "@/common/mixins/user";
// 拿到数据
const { mData } = userMix();
console.log(mData)

</script>
<style lang="scss" scoped>
</style>

3、给mixin传值

如果mixin中的方法依赖组件中的传值时，在调用userMix()时，可以传递参数

改造一下之前的代码，（可能没什么逻辑，仅做示例）：

user.js的代码：

import {
  ref,
  watch,
  onMounted
} from 'vue'
export default function (userData) {
  const mData = ref(null)
  onMounted(() => {
    getData()
  })
  watch(() => data, (newVal, oldVal) => {
    console.log('watch', newVal, oldVal)
  }, {
    deep: true
  })
  const getData = () => {
    if (!userData) {
        mData.value = {
            name: 'lily',
            age: 10
        }
    } else {
        mData.value = userData.value
    }
    
  }

  // 暴露出去
  return {
    mData,
    getData
  }
}

组件代码：

<template>
    <div class="box">
        {{mData.name}}
    </div>
</template>

<script setup>
import { ref} from 'vue'
import mixins from "@/common/mixins/user";
const user = ref({
    name: 'lucy',
    age: 6
})
const { mData } = mixins(user);
console.log(mData)

</script>
<style lang="scss" scoped>
</style>