vue mixin混入与hook

mixin混入是 ‌选项式 API‌，在vue3-Composition API <script setup> 中无法直接使用，需通过 setup() 函数转换

vue2、vue3选项式API:

// mixins/mixin.js
export const mixin = {methods: {courseType(courseLevel) {const levelMap = {1: '初级',2: '中级',3: '高级'};return levelMap[courseLevel] || '';}}
}

组件引入mixin

<template><view><!-- 直接调用混入的 courseType 方法 --><text>课程等级: {{ courseType(level) }}</text></view>
</template>

import { mixin } from '@/mixins/mixin.js';
export default {mixins: [mixin],mounted() {console.log(this.courseType(2)); // 输出 "中级"}
}

在vue3-Composition API 组件（<script setup>）‌无法直接使用,需通过 setup() 函数转换：

vue3-Composition API 推荐使用 ‌自定义 Hook‌ 替代混入

// hooks/useCourseLevel.js
export function useCourseLevel() {const courseType = (courseLevel) => {const levelMap = {1: '初级',2: '中级',3: '高级'};return levelMap[courseLevel] || '';};return {courseType};
}

组件中使用

<script setup>
import { useCourseLevel } from '@/hooks/useCourseLevel.js';const { courseType } = useCourseLevel();
</script>// html
<!-- 级别 -->
<view class="descript">{{ courseType(courseLevel) }}</view>