在 Vue2 和 Vue3 中，代码逻辑复用的方式有所不同，主要体现在 mixins 和自定义 hooks 的使用上。下面我会分别列出 Vue2 中的 mixins 和 Vue3 中的自定义 hooks 的示例。
Vue2 中的 Mixins
在 Vue2 中，mixins 是一种将可复用的逻辑注入到组件中的方式。你可以创建一个 mixin，然后在多个组件中使用它。
示例
// myMixin.js
export default {
data() {
return {
mixinData: 'This is mixin data'
};
},
methods: {
mixinMethod() {
console.log('This is a method from mixin');
}
}
};
// MyComponent.vue
<template>
<div>
<p>{{ mixinData }}</p>
<button @click="mixinMethod">Call Mixin Method</button>
</div>
</template>
<script>
import myMixin from './myMixin';
export default {
mixins: [myMixin],
};
</script>
Vue3 中的自定义 Hooks
在 Vue3 中，Composition API 引入了自定义 hooks 的概念，可以更灵活地组织和复用逻辑。自定义 hooks 是一个普通的函数，使用 Vue 提供的响应式 API。
示例
// useMyHook.js
import { ref } from 'vue';
export function useMyHook() {
const hookData = ref('This is hook data');
const hookMethod = () => {
console.log('This is a method from hook');
};
return { hookData, hookMethod };
}
// MyComponent.vue
<template>
<div>
<p>{{ hookData }}</p>
<button @click="hookMethod">Call Hook Method</button>
</div>
</template>
<script>
import { useMyHook } from './useMyHook';
export default {
setup() {
const { hookData, hookMethod } = useMyHook();
return { hookData, hookMethod };
}
};
</script>
对比
-
结构和可读性：
- Mixins：在组件中可能会导致命名冲突，难以追踪逻辑来源。
- 自定义 Hooks：逻辑更清晰，易于跟踪，函数之间更易于组合。
-
灵活性：
- Mixins：不够灵活，可能导致组件之间的依赖关系不明确。
- 自定义 Hooks：可以在多个组件之间自由组合，更符合函数式编程的理念。
-
TypeScript 支持：
- Mixins：在 TypeScript 中的支持较差，类型推导可能不够准确。
- 自定义 Hooks：TypeScript 的支持更好，能够明确指定返回的类型。
总结来说，虽然两者都能实现逻辑复用，但自定义 hooks 在 Vue3 中提供了更好的可读性、灵活性和 TypeScript 支持，成为更推荐的复用方式。
