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>