vue3代替mixins方案

在 Vue 3 中，可以使用 Composition API 来代替 mixins 方案。Composition API 通过提供一些函数和钩子来帮助开发者将逻辑组织成可重用的逻辑块，从而实现代码的复用和组合。

与 mixins 方案相比，Composition API 的优点有：

1. 更好的类型推断和类型安全
2. 更灵活的代码复用和组合
3. 更清晰的代码结构和可读性

下面是一个使用 Composition API 实现的计数器示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive, computed, watchEffect } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    const increment = () => {
      state.count++;
    };

    const doubleCount = computed(() => {
      return state.count * 2;
    });

    watchEffect(() => {
      console.log(`Count changed to ${state.count}`);
    });

    return {
      count: state.count,
      doubleCount,
      increment,
    };
  },
};
</script>

在这个示例中，使用了 `reactive` 函数来创建响应式状态对象，使用 `computed` 函数来计算派生值，使用 `watchEffect` 函数来监听状态变化。最后通过 `setup` 函数返回需要暴露给模板的数据和方法。这样就实现了一个简单的计数器，而且代码结构更加清晰和灵活。