vue3 mixins

// Vue 3 已经不再推荐使用 mixins，而是推荐使用 Composition API。但为了兼容性，Vue 3 仍然支持 mixins。
// 下面是一个简单的 Vue 3 mixins 示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

// 定义一个 mixin
const myMixin = {
  data() {
    return {
      message: 'Hello from mixin!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed by mixin!';
    }
  }
};

export default {
  mixins: [myMixin],
  setup() {
    // 在 setup 中也可以使用组合式 API 来定义响应式数据和方法
    const count = ref(0);

    return {
      count
    };
  }
};
</script>

<style scoped>
/* 样式部分可以根据需要添加 */
</style>

解释说明：

1. mixin 定义：myMixin 是一个普通的 JavaScript 对象，它包含了 data 和 methods，这些属性会在组件中被合并。
2. 组件使用 mixin：在组件的选项中通过 mixins: [myMixin] 引入并使用这个 mixin。
3. setup 函数：虽然我们使用了 mixin，但在 Vue 3 中更推荐使用 setup 函数来处理逻辑，这里也展示了如何结合使用 setup 和 mixin。

需要注意的是，Vue 3 更加推崇使用 Composition API，因为它的可读性和维护性更好。如果可以的话，建议尽量使用 Composition API 来替代 mixins。