1、Vue2中的mixins
Mixins 是一种包含多个组件选项的对象。可以将 mixin 作为组件的一个选项引入，从而在该组件中“混入”这个对象的选项。通过这种方式，mixins 可以帮助你实现功能复用，减少重复代码。
// mixin.js
export default {data() {return {sharedData: 'I am shared data'}},methods: {sharedMethod() {console.log('This method is shared.')}}
}// ComponentA.vue
import Vue from 'vue'
import mixin from './mixin'Vue.mixin(mixin)// ComponentB.vue
import Vue from 'vue'
import mixin from './mixin'Vue.mixin(mixin)2、Vue3中的自定义hook
在Vue 3中，可以通过创建自定义hook来复用状态逻辑。自定义hook是一个函数，它接受外部传入的依赖，并返回一个或多个响应式的值或方法。
// hook.js (自定义hook)
import { ref } from 'vue'export function useShared() {const sharedData = ref('I am shared data')function sharedMethod() {console.log('This method is shared.')}return { sharedData, sharedMethod }
}// ComponentA.vue
<template><!-- 使用sharedData和sharedMethod -->
</template><script>
import { useShared } from './hook'export default {setup() {const { sharedData, sharedMethod } = useShared()// 返回到模板中使用return { sharedData, sharedMethod }}
}
</script>// ComponentB.vue
<template><!-- 使用sharedData和sharedMethod -->
</template><script>
import { useShared } from './hook'export default {setup() {const { sharedData, sharedMethod } = useShared()// 返回到模板中使用return { sharedData, sharedMethod }}
}
</script>3、Vue2/Vue3中的代码逻辑复用对比（mixins、自定义hook）
| 对比 | vue2的mixins | vue3的自定义hook |
| 结构和可读性 | 在组件中可能会导致命名冲突，难以追踪逻辑来源。 | 逻辑更清晰，易于跟踪，函数之间更易于组合。 |
| 灵活性 | 不够灵活，可能导致组件之间的依赖关系不明确 | 可以在多个组件之间自由组合，更符合函数式编程的理念 |
| TypeScript 支持 | 在 TypeScript 中的支持较差，类型推导可能不够准确 | TypeScript 的支持更好，能够明确指定返回的类型 |
| 总结 | 由于mixins混入的特性，其中定义的变量相当于隐式引入了父组件，从而导致变量难以定位到其定义的具体位置 若父组件仅需要mixins中某一小段逻辑，通过mixins的方式还是只能将整个mixins文件引入后进行使用，无形中增加了无效代码的引用 最致命的便是多mixins引入重名的情况 | 由于hooks本身是一个函数，因此调用hooks中定义的方法会产生闭包，大量滥用hooks，不可避免的存在一定的内存泄露问题，不过大部分情况下hook的表现还是非常优秀的。 |
总结来说，虽然两者都能实现逻辑复用，但自定义 hooks 在 Vue3 中提供了更好的可读性、灵活性和 TypeScript 支持，成为更推荐的复用方式。