Vue 3 使用混入（Mixins）
1.传统混入方式
-混入的使用方式和 Vue 2 类似
// myMixin.jsexport const myMixin = { data() { return { mixinData: '这是混入的数据' }; }, methods: { hello() { console.log('Hello from Mixin!'); } }};MyComponent.vue
<!-- MyComponent.vue --><template> <div> <p>{{ mixinData }}</p> <!-- 访问混入中的数据 --> <button @click="hello">点击调用混入方法</button> </div></template><script>import { myMixin } from './myMixin';export default { mixins: [myMixin], // 引入混入 data() { return { componentData: '这是组件的数据' }; }, created() { console.log(this.mixinData); // 访问混入中的数据 this.hello(); // 调用混入中的方法 }};</script>在 Vue 3 中，混入的 data 会与组件的 data 合并。如果它们有同名属性，组件的 data 会覆盖混入中的同名数据。
注意：
如果有方法、计算属性等同名项，它们也会合并或覆盖。
如果你有多个混入，它们的数据和方法会依次合并。
2. Vue 3 中的组合式 API 替代混入
Vue 3 推出了组合式 API，提供了 setup 函数，这是比传统的混入更推荐的方式。它将逻辑组织成独立的函数，可以让代码更具模块化、可复用性和更好的类型支持。
setup 是 Vue 3 中所有组合式 API 的入口。你可以将需要共享的逻辑提取到一个单独的函数中，然后在组件中使用它。
示例：使用组合式 API 代替混入
// useMixin.js - 组合式 APIimport { ref } from 'vue';export function useMixin() { const mixinData = ref('这是混入的数据'); const hello = () => { console.log('Hello from Composition API!'); }; return { mixinData, hello };}MyComponent.vue
<!-- MyComponent.vue --><template> <div> <p>{{ mixinData }}</p> <!-- 访问组合式 API 中的数据 --> <button @click="hello">点击调用组合式 API 方法</button> </div></template><script>import { useMixin } from './useMixin';export default { setup() { const { mixinData, hello } = useMixin(); // 使用组合式 API 获取数据和方法 return { mixinData, hello }; }};</script><script setup>import { useMixin } from './useMixin';const { hello } = useMixin (); // 调用组合式 API 中的逻辑</script>组合式 API 的优势
可复用性：你可以将逻辑提取到 use 开头的函数中，方便在多个组件之间共享。
更清晰的逻辑分离：每个功能都可以封装成一个独立的函数，增强了组件的可读性和维护性。
更强的类型支持：组合式 API 配合 TypeScript 使用时，类型推导更加精准。
避免了命名冲突：使用组合式 API 时，逻辑是通过函数组织的，不再依赖于 data、methods、computed 等选项的合并，从而避免了命名冲突问题。
总结
使用混入（Mixins）：如果需要使用传统的混入方式，在 Vue 3 中是完全支持的。可以通过 mixins 选项将混入引入组件，混入的 data、methods 等会与组件中的数据合并。但由于混入可能会引发命名冲突和维护上的困惑，推荐逐步过渡到组合式 API。
推荐使用组合式 API：Vue 3 引入的组合式 API 是更现代、更灵活的解决方案，能够提升代码的可复用性和可维护性。你可以通过 setup 函数来封装逻辑，使用 ref、reactive、computed 等组合式 API 来管理组件的状态和行为。它不再依赖于选项合并的模式，从而避免了混入所带来的问题。
通过组合式 API，可以更清晰地组织组件的逻辑，增强代码的模块化，更容易共享和测试功能。