Vue组合式 API 模式与实用案例分析 🚀

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。

现代开发要求代码动态、可扩展且易于维护，特别是在构建模块化应用程序时。Vue 3 引入的Vue 组合式 API提供了一种优雅的方式来处理状态、响应性和逻辑封装。随着Vue 3.5的发布，出现了新特性和改进的模式，有效应对更复杂的使用场景。

本文深入探讨条件 Vue 组合式 API 模式，包含高级示例、现实世界场景和尖端技术，充分利用Vue 3.5的特性。同时提供JavaScript和TypeScript实现，以满足不同开发者的需求。

为什么使用条件模式？

条件组合式 API 模式专注于根据特定条件组织和重用逻辑。它特别适用于以下场景：

根据用户角色或偏好动态更改 UI。
根据应用状态（例如标签页、模态框）获取和缓存数据。
实施功能开关以进行 A/B 测试。

通过封装条件逻辑，你可以实现：

可读性：更清晰、更易于维护的代码。
可重用性：跨组件共享的组合逻辑。
模块化：更易于测试和扩展的解耦逻辑。

Vue 组合式 API 的核心设置

在我们探索高级示例之前，先来打下基础。

简单的响应式示例（JavaScript）

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="toggle">切换消息</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');
    const toggle = () => {
      message.value = message.value === 'Hello, Vue!' ? 'Goodbye, Vue!' : 'Hello, Vue!';
    };

    return { message, toggle };
  },
};
</script>

简单的响应式示例（TypeScript）

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="toggle">切换消息</button>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const message = ref<string>('Hello, Vue!');
    const toggle = (): void => {
      message.value = message.value === 'Hello, Vue!' ? 'Goodbye, Vue!' : 'Hello, Vue!';
    };

    return { message, toggle };
  },
});
</script>

高级条件模式

1. 基于模式的动态表单处理

场景：一个动态表单构建器，表单字段根据用户偏好或角色变化。

可组合示例（JavaScript）

import { ref, computed } from 'vue';

export function useDynamicForm(role) {
  const formSchema = computed(() => {
    if (role.value === 'admin') {
      return [
        { label: '管理员代码', type: 'text', required: true },
        { label: '权限', type: 'checkbox', options: ['读取', '写入'] },
      ];
    } else {
      return [
        { label: '姓名', type: 'text', required: true },
        { label: '电子邮件', type: 'email', required: true },
      ];
    }
  });

  const formData = ref({});

  return { formSchema, formData };
}

可组合示例（TypeScript）

import { ref, computed, Ref } from 'vue';

interface FormField {
  label: string;
  type: string;
  required?: boolean;
  options?: string[];
}

export function useDynamicForm(role: Ref<string>) {
  const formSchema = computed<FormField[]>(() => {
    if (role.value === 'admin') {
      return [
        { label: '管理员代码', type: 'text', required: true },
        { label: '权限', type: 'checkbox', options: ['读取', '写入'] },
      ];
    } else {
      return [
        { label: '姓名', type: 'text', required: true },
        { label: '电子邮件', type: 'email', required: true },
      ];
    }
  });

  const formData = ref<Record<string, any>>({});

  return { formSchema, formData };
}

2. A/B 测试的功能开关

场景：为不同用户组动态启用或禁用功能。

可组合示例

import { ref } from 'vue';

export function useFeatureToggle() {
  const isFeatureEnabled = ref(false);

  const enableFeature = () => (isFeatureEnabled.value = true);
  const disableFeature = () => (isFeatureEnabled.value = false);

  return { isFeatureEnabled, enableFeature, disableFeature };
}

组件使用

<template>
  <div>
    <p v-if="isFeatureEnabled">新功能上线！</p>
    <p v-else>旧功能</p>
    <button @click="enableFeature">启用功能</button>
    <button @click="disableFeature">禁用功能</button>
  </div>
</template>

<script>
import { useFeatureToggle } from '@/composables/useFeatureToggle';

export default {
  setup() {
    const { isFeatureEnabled, enableFeature, disableFeature } = useFeatureToggle();
    return { isFeatureEnabled, enableFeature, disableFeature };
  },
};
</script>

3. Vue 3.5 Suspense优化数据获取

场景：使用Suspense进行数据获取，带有回退和加载状态。

组件示例

<template>
  <Suspense>
    <template #default>
      <UserData />
    </template>
    <template #fallback>
      <p>加载中...</p>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const UserData = defineAsyncComponent(() =>
  import('@/components/UserData.vue')
);

export default {
  components: { UserData },
};
</script>

现实世界案例：多标签数据查看器

场景：为多标签仪表板动态加载内容。

可组合

import { ref, watch, Ref } from 'vue';
import axios from 'axios';

export function useTabData(tab: Ref<string>) {
  const data = ref<any>(null);
  const isLoading = ref<boolean>(false);

  const fetchData = async () => {
    isLoading.value = true;
    try {
      const response = await axios.get(`/api/tabs/${tab.value}`);
      data.value = response.data;
    } catch (error) {
      console.error(error);
    } finally {
      isLoading.value = false;
    }
  };

  watch(tab, fetchData, { immediate: true });

  return { data, isLoading };
}

组件使用

<template>
  <div>
    <select v-model="activeTab">
      <option value="tab1">标签1</option>
      <option value="tab2">标签2</option>
    </select>
    <div v-if="isLoading">加载中...</div>
    <div v-else>{{ data }}</div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useTabData } from '@/composables/useTabData';

export default {
  setup() {
    const activeTab = ref('tab1');
    const { data, isLoading } = useTabData(activeTab);

    return { activeTab, data, isLoading };
  },
};
</script>

结论

条件 Vue 组合式 API 模式使开发者能够创建适应现实世界复杂性的动态、可重用且高效的逻辑。通过利用 Vue 3.5 中的高级技术和特性，你可以：

构建模块化、可维护且可扩展的应用程序。
通过watch、Suspense和computed优化性能。
提供针对特定条件的增强用户体验。

这些模式，结合可组合函数和 TypeScript，为任何现代 Vue 应用程序提供了坚实的基础。

Vue组合式 API 模式与实用案例分析 🚀