vue3 mixins 代替

// 使用 Vue 3 的 Composition API 来代替 mixins

// 定义一个可复用的逻辑函数
import { ref, onMounted } from 'vue';

function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  onMounted(() => {
    console.log('Counter is mounted');
  });

  return { count, increment };
}

// 在组件中使用该逻辑
export default {
  setup() {
    // 调用 useCounter 函数
    const { count, increment } = useCounter();

    return {
      count,
      increment
    };
  }
};

解释说明：

1. Composition API：Vue 3 引入了 Composition API，它提供了一种更灵活的方式来组织和复用逻辑。与 Vue 2 中的 mixins 相比，Composition API 更加直观且避免了命名冲突等问题。

2. useCounter 函数：这是一个可复用的逻辑函数，它使用了 Vue 3 的响应式 API (ref, onMounted) 来创建和管理状态。这个函数返回了一个对象，包含状态 (count) 和方法 (increment)。

3. setup 函数：在 Vue 3 组件中，setup 函数是 Composition API 的入口点。我们可以在其中调用 useCounter 函数，并将返回的状态和方法暴露给模板使用。

通过这种方式，你可以轻松地在多个组件之间共享逻辑，而无需依赖 mixins。