Hooks与mixin 的区别

mixin 为 vue2的产物，Hooks为vue3的产物。
两者都是为了解决逻辑代码复用的问题，Vue 3 中依然支持 ‌Mixins‌ 机制，但官方更推荐使用 ‌Composition API（Hooks）‌ 作为逻辑复用方案。

hooks

• Hooks 是包含响应式状态（使用 ref/reactive 创建响应式变量）和逻辑组合的函数。
• 自定义的 hooks 一定要是 use 开头，语义更友好。
• 重名情况可以在组件中重新定义，解决了mixin 混入命名冲突的问题。

举个简单栗子

// src/hooks/useFoo.js 定义Hooks
export function useFoo() {let message = '我是 useFoo 中的 message';function test() {console.log('useFoo 的 test');}return {message,test};
}

// App.vue中使用Hooks
<script setup>
import { useFoo } from "./hooks/useFoo";
const { message: fooMessage, test } = useFoo(); // messagef重命名为fooMessage
</script>