基于Vue3组合式API的互斥输入模式实现与实践分享
目录
- 背景与痛点
- 设计思路
- 技术实现
- 使用场景与案例
- 遇到的问题与解决方案
- 最佳实践
- 总结
1. 背景与痛点
在表单交互设计中，我们经常面临这样的场景：多种输入方式互斥。例如，在评分系统中，用户可以选择通过填写明细表格进行逐项评分，也可以直接给出总评分。这两种输入方式不应同时生效，否则可能导致数据不一致。
传统解决方案的痛点：
- 状态管理分散：每个表单组件都需要单独管理互斥状态
- 逻辑重复：禁用/启用逻辑在多个地方重复编写
- 条件判断复杂：判断何时禁用另一输入模式的条件可能很复杂
- 代码耦合度高：输入状态与UI禁用逻辑强耦合
- 难以复用：相同的互斥逻辑难以在不同项目间复用
2. 设计思路
为解决上述问题，我们设计了一套基于Vue3 Composition API的解决方案，将互斥输入模式的管理抽象为可复用的组合式函数。设计原则如下：
- 关注点分离：将互斥状态管理与业务逻辑分离
- 声明式API：提供简洁的声明式API，易于理解和使用
- 智能判断：只有当有实际数据时才禁用互斥输入
- 可组合性：可与其他Vue组合式API无缝集成
- 渐进式设计：基础API灵活通用，扩展API针对特定场景优化
3. 技术实现
我们实现了两个核心组合式API：
useMutuallyExclusiveInputs：通用的互斥输入模式管理useScoreInputModes：基于通用API的评分场景特化版本
3.1 通用互斥输入模式API
首先，我们实现了基础的互斥输入模式管理API：
// useMutuallyExclusiveInputs.ts
import { ref, computed, Ref } from 'vue';
/**
* 互斥输入模式的组合式API
*/
export function useMutuallyExclusiveInputs<T extends string, D = any>(
modes: readonly T[],
initialData: Record<T, D>,
options: {
initialMode?: T;
disabled?: Ref<boolean>;
onModeChange?: (newMode: T, oldMode: T | null) => void;
confirmClear?: () => Promise<boolean> | boolean;
} = {}
) {
// 提取配置项
const {
initialMode = modes[0],
disabled = ref(false),
onModeChange,
confirmClear = async () => true
} = options;
// 当前活动的输入模式
const activeMode = ref<T | null>(initialMode) as Ref<T | null>;
// 为每个模式创建响应式数据存储
const modeData: Record<T, Ref<D>> = {} as Record<T, Ref<D>>;
// 初始化每个模式的数据
modes.forEach((mode) => {
modeData[mode] = ref(
Array.isArray(initialData[mode]) ? [...initialData[mode]] : initialData[mode]
) as Ref<D>;
});
// 检查特定模式是否应该禁用
function shouldDisable(mode: T) {
return computed(() => {
// 如果全局禁用，则禁用所有模式
if (disabled.value) return true;
// 如果当前没有激活的模式，则不禁用任何模式
if (activeMode.value === null) return false;
// 如果请求检查的模式就是当前激活模式，则不禁用
if (activeMode.value === mode) return false;
// 如果当前激活的是其他模式，检查其他模式是否有实际数据
const activeData = modeData[activeMode.value].value;
// 检查激活模式的数据是否有效（有实际值）
if (Array.isArray(activeData)) {
// 对于数组类型，检查是否有有效数据项
return activeData.length > 0 && activeData.some(item => {
if (typeof item === 'object' && item !== null) {
return Object.values(item).some(val =>
val !== undefined && val !== null && val !== ''
);
}
return item !== undefined && item !== null && item !== '';
});
} else if (typeof activeData === 'object' && activeData !== null) {
// 对于对象类型，检查是否有非空属性
return Object.values(activeData).some(val =>
val !== undefined && val !== null && val !== '' && val !== 0
);
} else {
// 对于原始类型，检查是否有值
return activeData !== undefined && activeData !== null &&
activeData !== '' && activeData !== 0;
}
});
}
// 清除特定模式的数据
async function clearData(mode: T): Promise<void> {
const shouldClear = await confirmClear();
if (!shouldClear) return;
const currentData = modeData[mode].value;
// 根据数据类型进行智能清空
if (Array.isArray(currentData)) {
// 检查数组是否为空，如果不为空才清空
if (currentData.length > 0) {
(modeData[mode].value as any) = [];
}
} else if (typeof currentData === 'object' && currentData !== null) {
// 检查对象是否有有效属性，只清空有值的属性
const hasValidData = Object.values(currentData).some(val =>
val !== undefined && val !== null && val !== '' && val !== 0
);
if (hasValidData) {
// 创建新对象，保留原有结构但清空有值的属性
const clearedObj = { ...currentData };
// 遍历对象属性，只清空有值的属性
Object.keys(clearedObj).forEach(key => {
const value = (clearedObj as any)[key];
if (value !== undefined && value !== null && value !== '' && value !== 0) {
(clearedObj as any)[key] = undefined;
}
});
modeData[mode].value = clearedObj as D;
}
} else {
// 对于原始类型，检查是否有值
if (currentData !== undefined && currentData !== null &&
currentData !== '' && currentData !== 0) {
modeData[mode].value = undefined as unknown as D;
}
}
}
// 设置当前活动模式
async function setMode(mode: T): Promise<void> {
if (disabled.value) return;
const oldMode = activeMode.value;
// 只有当模式发生变化时才进行处理
if (oldMode !== mode) {
// 检查旧模式是否有实际数据
let shouldClearOldData = false;
if (oldMode !== null) {
const oldData = modeData[oldMode].value;
// 根据数据类型判断是否需要清空
if (Array.isArray(oldData)) {
// 对于数组，检查是否有有效项
shouldClearOldData = oldData.length > 0 && oldData.some(item => {
if (typeof item === 'object' && item !== null) {
return Object.values(item).some(val =>
val !== undefined && val !== null && val !== ''
);
}
return item !== undefined && item !== null && item !== '';
});
} else if (typeof oldData === 'object' && oldData !== null) {
// 对于对象，检查是否有非空属性
shouldClearOldData = Object.values(oldData).some(val =>
val !== undefined && val !== null && val !== '' && val !== 0
);
} else {
// 对于原始类型，检查是否有值
shouldClearOldData = oldData !== undefined && oldData !== null &&
oldData !== '' && oldData !== 0;
}
// 只有在有实际数据需要清除时才清空
if (shouldClearOldData) {
await clearData(oldMode);
}
}
// 更新活动模式
activeMode.value = mode;
// 触发模式变更回调
if (onModeChange) {
onModeChange(mode, oldMode);
}
}
}
// 获取当前活动模式的数据
const activeData = computed(() =>
activeMode.value !== null ? modeData[activeMode.value].value : undefined
);
// 返回API
return {
activeMode,
modeData,
setMode,
clearData,
shouldDisable,
activeData,
// 其他API...
};
}
3.2 评分场景特化API
然后，我们基于通用API实现了评分场景的特化版本：
// useScoreInputModes.ts
import { ref, computed, Ref } from 'vue';
import useMutuallyExclusiveInputs from './useMutuallyExclusiveInputs';
/**
* 评分项接口
*/
interface ScoreItem {
id: string | number;
score: number;
scoreResult?: number;
[key: string]: any;
}
/**
* 评分输入模式组合式API
*/
export function useScoreInputModes(options = {}) {
const {
enabled = ref(true),
totalScore = ref(100),
scoreRules = {
thresholds: [0, 60, 70, 80, 90, 101],
levels: ['E', 'D', 'C', 'B', 'A']
},
minScore = 0,
maxScore = 100,
onScoreChange
} = options;
// 使用通用互斥输入模式API
const { activeMode, modeData, setMode, clearData, reset } =
useMutuallyExclusiveInputs(
['table', 'final'] as const,
{
table: [] as ScoreItem[],
final: undefined as number | undefined
},
{
initialMode: 'table',
disabled: computed(() => !enabled.value)
}
);
// 表格评分数据
const tableScores = modeData.table as Ref<ScoreItem[]>;
// 最终评分数据
const finalScore = modeData.final as Ref<number | undefined>;
// 评分等级
const scoreLevel = ref<string | number>();
// 表格评分总和
const tableScoreTotal = computed(() => {
return tableScores.value.reduce((sum, item) => {
return sum + (item.scoreResult || 0);
}, 0);
});
// 表格评分百分比
const tableScorePercentage = computed(() => {
if (totalScore.value <= 0) return 0;
return (tableScoreTotal.value / totalScore.value) * 100;
});
// 表格评分是否禁用
const isTableDisabled = computed(() => {
// 如果全局禁用，则禁用表格评分
if (!enabled.value) return true;
// 只在最终评分模式且有实际的最终评分值时才禁用表格评分
if (activeMode.value === 'final') {
return finalScore.value !== undefined &&
finalScore.value !== null &&
finalScore.value !== 0;
}
return false;
});
// 最终评分是否禁用
const isFinalDisabled = computed(() => {
// 如果全局禁用，则禁用最终评分
if (!enabled.value) return true;
// 只在表格评分模式且表格中有实际评分项时才禁用最终评分
if (activeMode.value === 'table') {
return tableScores.value.some(
(item) =>
item.scoreResult !== undefined &&
item.scoreResult !== null &&
item.scoreResult !== 0
);
}
return false;
});
// 切换到表格评分模式
function useTableMode() {
// 只有当启用且不处于表格模式时才切换
if (enabled.value && activeMode.value !== 'table') {
setMode('table');
}
}
// 切换到最终评分模式
function useFinalMode() {
// 只有当启用且不处于最终评分模式时才切换
if (enabled.value && activeMode.value !== 'final') {
setMode('final');
}
}
// 更新评分项目
function updateScoreItem(id: string | number, result: number) {
// 检查是否启用且在表格评分模式
if (!enabled.value || activeMode.value !== 'table') return;
const item = tableScores.value.find((item) => item.id === id);
if (item) {
// 只有当分数发生变化时才更新
if (item.scoreResult !== result) {
item.scoreResult = result;
// 在表格评分模式下，自动计算最终评分
if (tableScorePercentage.value > 0) {
const calculatedScore = Math.min(
maxScore,
Math.max(minScore, parseFloat(tableScorePercentage.value.toFixed(2)))
);
finalScore.value = calculatedScore;
scoreLevel.value = calculateLevel(calculatedScore);
if (onScoreChange) {
onScoreChange(calculatedScore, scoreLevel.value);
}
}
}
}
}
// 更新最终评分
function updateFinalScore(score: number) {
// 检查是否启用
if (!enabled.value) return;
// 如果不在最终评分模式，切换模式
if (activeMode.value !== 'final') {
// 只有当没有实际的表格评分数据时才自动切换
const hasTableScoreData = tableScores.value.some(
(item) =>
item.scoreResult !== undefined && item.scoreResult !== null && item.scoreResult !== 0
);
if (!hasTableScoreData) {
setMode('final');
} else {
// 如果有数据，不自动切换，避免清空现有数据
return;
}
}
// 只有当最终评分实际改变时才更新
if (finalScore.value !== score) {
const validScore = Math.min(maxScore, Math.max(minScore, score));
finalScore.value = validScore;
scoreLevel.value = calculateLevel(validScore);
if (onScoreChange) {
onScoreChange(validScore, scoreLevel.value);
}
}
}
// 根据分数计算等级
function calculateLevel(score: number): string | number {
if (score === undefined || score === null) return scoreRules.levels[0];
const { thresholds, levels } = scoreRules;
for (let i = 0; i < thresholds.length - 1; i++) {
if (score >= thresholds[i] && score < thresholds[i + 1]) {
return levels[i];
}
}
return levels[0];
}
// 返回API
return {
scoreMode: activeMode,
tableScores,
finalScore,
scoreLevel,
useTableMode,
useFinalMode,
isTableDisabled,
isFinalDisabled,
tableScoreTotal,
tableScorePercentage,
updateScoreItem,
updateFinalScore,
// 其他API...
};
}
4. 使用场景与案例
该组合式API适用于多种互斥输入场景，以下是几个典型应用：
4.1 评分系统
在我们的评分系统中，用户可以通过表格逐项评分，也可以直接给出最终评分：
<template>
<div>
<!-- 表格评分 -->
<div>
<h3>评分表</h3>
<table>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>
<input
type="number"
v-model="item.scoreResult"
:disabled="tableScoreInputDisabled"
@focus="handleTableScoreFocus"
@change="handleTableScoreChange"
/>
</td>
</tr>
</table>
</div>
<!-- 最终评分 -->
<div>
<h3>最终评分</h3>
<input
type="number"
v-model="formData.finalEvaluationScore"
:disabled="finalScoreInputDisabled"
@focus="handleFinalScoreFocus"
@change="handleChange"
/>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useScoreInputModes } from '@/composables';
const tableData = ref([/* 评分项数据 */]);
const formData = ref({
finalEvaluationScore: undefined,
finalEvaluationLevel: undefined
});
const totalScore = ref(100);
// 使用评分输入模式API
const {
scoreMode,
useTableMode,
useFinalMode,
updateScoreItem,
updateFinalScore,
clearTableScores
} = useScoreInputModes({
enabled: computed(() => true),
totalScore: computed(() => totalScore.value),
scoreRules: {
thresholds: [0, 70, 85, 101],
levels: ['1', '2', '3', '4']
},
maxScore: 100,
onScoreChange: (score, level) => {
if (score !== null) {
formData.value.finalEvaluationScore = score;
formData.value.finalEvaluationLevel = level?.toString();
}
}
});
// 使用组合式API的状态来管理互斥
const isManualScoreInput = computed(() => scoreMode.value === 'final');
const hasTableScores = computed(() => {
return tableData.value.some(
(item) => item.scoreResult !== undefined &&
item.scoreResult !== null &&
item.scoreResult !== 0
);
});
// 最终评分输入框禁用条件
const finalScoreInputDisabled = computed(() => {
const hasRealTableScores = tableData.value.some(
(item) => item.scoreResult !== undefined &&
item.scoreResult !== null &&
item.scoreResult !== 0
);
return hasRealTableScores && !isManualScoreInput.value;
});
// 表格评分输入框禁用条件
const tableScoreInputDisabled = computed(() => {
return (
isManualScoreInput.value &&
formData.value.finalEvaluationScore !== undefined &&
formData.value.finalEvaluationScore !== null &&
formData.value.finalEvaluationScore !== 0
);
});
// 处理最终评分输入框获得焦点
const handleFinalScoreFocus = () => {
// 只需标记处于最终评分模式，但不自动禁用表格评分
useFinalMode();
};
// 处理表格评分输入框获得焦点
const handleTableScoreFocus = () => {
// 只需标记处于表格评分模式，但不自动禁用最终评分
useTableMode();
};
// 处理表格得分变化
const handleTableScoreChange = () => {
// 更新表格评分项
tableData.value.forEach((item) => {
if (item.scoreResult !== undefined && item.scoreResult !== null) {
updateScoreItem(item.id, Number(item.scoreResult));
}
});
// 自动计算最终评分
// ...
};
// 处理最终评分变化
const handleChange = () => {
// 更新最终评分
if (formData.value.finalEvaluationScore !== undefined) {
updateFinalScore(Number(formData.value.finalEvaluationScore));
// 只有当最终评分有实际值时，才清空表格评分
if (isManualScoreInput.value && formData.value.finalEvaluationScore > 0) {
clearScores();
}
}
};
// 清空表格所有评分结果
const clearScores = () => {
if (tableData.value && tableData.value.length) {
tableData.value.forEach((item) => {
item.scoreResult = undefined;
});
clearTableScores();
}
};
</script>
4.2 其他应用场景
除了评分系统，这一组合式API还适用于：
- 支付方式选择：信用卡支付、在线支付等多种支付方式互斥
- 配送方式选择：快递、自提等多种配送方式互斥
- 表单填写模式：手动填写与模板选择互斥
- 数据筛选方式：预设筛选条件与自定义筛选条件互斥
5. 遇到的问题与解决方案
在实现过程中，我们遇到了以下几个典型问题：
5.1 问题一：仅切换模式就禁用另一输入项
问题描述：初始版本中，只要用户点击或聚焦到某一输入模式，就会立即禁用另一个输入模式，用户体验不好。
解决方案：
- 修改
tableScoreInputDisabled和finalScoreInputDisabled计算属性，只有当另一个模式有实际数据时才禁用 - 分离"聚焦/切换模式"与"禁用逻辑"，使其不再强耦合
// 改进前 - 仅模式切换就禁用
const tableScoreInputDisabled = computed(() =>
isManualScoreInput.value
);
// 改进后 - 只有当最终评分有值时才禁用
const tableScoreInputDisabled = computed(() =>
isManualScoreInput.value &&
formData.value.finalEvaluationScore !== undefined &&
formData.value.finalEvaluationScore !== null &&
formData.value.finalEvaluationScore !== 0
);
5.2 问题二：切换模式自动清空数据
问题描述：早期版本中，切换输入模式会自动清空另一个模式的数据，导致用户信息丢失。
解决方案：
- 修改
setMode函数，只有在另一模式有实际数据且确认清空时才清除数据 - 引入
shouldClearOldData逻辑，智能判断是否需要清空
// 改进前
if (activeMode.value !== null && activeMode.value !== mode) {
await clearData(activeMode.value);
}
// 改进后
if (oldMode !== mode && oldMode !== null) {
let shouldClearOldData = false;
const oldData = modeData[oldMode].value;
// 检查是否有实际数据需要清除
// ...判断逻辑...
if (shouldClearOldData) {
await clearData(oldMode);
}
}
5.3 问题三：如何判断"有效数据"
问题描述：判断一个输入模式是否有"有效数据"并不简单，特别是当数据类型多样时。
解决方案：
- 针对不同数据类型（数组、对象、原始值）设计不同的有效性检查逻辑
- 对于数组，不仅检查长度，还检查元素是否有效
- 对于对象，检查属性值是否有效
- 对于原始值，排除undefined、null、空字符串和0等"空值"
6. 最佳实践
在使用这套组合式API时，我们总结出以下最佳实践：
6.1 合理设计初始数据结构
// ✅ 好的做法：为每种模式设置合适的初始数据类型
useMutuallyExclusiveInputs(
['table', 'final'],
{
table: [], // 数组类型
final: undefined // 原始类型
}
)
// ❌ 不好的做法：随意设置，不符合实际数据类型
useMutuallyExclusiveInputs(
['table', 'final'],
{
table: {},
final: []
}
)
6.2 区分模式切换和数据禁用
// ✅ 好的做法：只有在有实际数据时才禁用
const inputDisabled = computed(() =>
isOtherMode.value && hasActualData.value
);
// ❌ 不好的做法：仅切换模式就禁用
const inputDisabled = computed(() =>
isOtherMode.value
);
6.3 使用场景特化API
当处理特定场景时，优先使用针对该场景优化的特化API，比如评分场景使用useScoreInputModes而不是直接使用useMutuallyExclusiveInputs。
7. 总结
通过抽象互斥输入模式逻辑为可复用的组合式API，我们成功解决了表单互斥输入的痛点问题。这一解决方案具有以下优势：
- 解耦业务与状态：将互斥状态管理与业务逻辑分离
- 提升代码可读性：API设计直观，使用方式简单
- 增强用户体验：只在必要时禁用互斥输入，避免操作受阻
- 提高开发效率：复杂逻辑封装为可复用API，减少重复开发
- 易于维护：集中处理互斥逻辑，问题定位与修复更简单
随着项目的发展，我们将继续优化这套API，添加更多功能并支持更多场景，为表单开发提供更强大的工具支持。
8. API文档
8.1 useMutuallyExclusiveInputs
通用的互斥输入模式管理API。
参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| modes | readonly string[] | 是 | - | 互斥模式的枚举列表 |
| initialData | Record<string, any> | 是 | - | 各模式的初始数据 |
| options | object | 否 | {} | 配置选项 |
| options.initialMode | string | 否 | modes[0] | 初始激活的模式 |
| options.disabled | Ref<boolean> | 否 | ref(false) | 是否全局禁用所有模式 |
| options.onModeChange | (newMode, oldMode) => void | 否 | - | 模式变更时的回调 |
| options.confirmClear | () => Promise<boolean> | 否 | async () => true | 清空数据前的确认函数 |
返回值
| 属性 | 类型 | 说明 |
|---|---|---|
| activeMode | Ref<string | null> | 当前激活的模式 |
| modeData | Record<string, Ref<any>> | 各模式的数据 |
| setMode | (mode: string) => Promise<void> | 设置当前激活模式 |
| clearData | (mode: string) => Promise<void> | 清空指定模式的数据 |
| shouldDisable | (mode: string) => Ref<boolean> | 获取指定模式是否应该禁用 |
| activeData | Ref<any> | 当前激活模式的数据 |
| reset | () => void | 重置所有数据和模式 |
使用示例
const { activeMode, modeData, setMode, shouldDisable } = useMutuallyExclusiveInputs(
['form', 'template'],
{
form: {},
template: null
},
{
initialMode: 'form',
disabled: computed(() => !isEditable.value)
}
);
// 检查模板模式是否应该禁用
const isTemplateDisabled = shouldDisable('template');
// 切换到表单模式
function switchToForm() {
setMode('form');
}
// 获取表单数据
const formData = modeData.form;
8.2 useScoreInputModes
评分场景的专用互斥输入模式管理API。
参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| options | object | 否 | {} | 配置选项 |
| options.enabled | Ref<boolean> | 否 | ref(true) | 是否启用评分功能 |
| options.totalScore | Ref<number> | 否 | ref(100) | 总分基准值 |
| options.scoreRules | object | 否 | {thresholds: [0, 60, 70, 80, 90, 101], levels: ['E', 'D', 'C', 'B', 'A']} | 评分规则 |
| options.minScore | number | 否 | 0 | 最小评分值 |
| options.maxScore | number | 否 | 100 | 最大评分值 |
| options.onScoreChange | (score, level) => void | 否 | - | 评分变更时的回调 |
返回值
| 属性 | 类型 | 说明 |
|---|---|---|
| scoreMode | Ref<'table' | 'final' | null> | 当前评分模式 |
| tableScores | Ref<ScoreItem[]> | 表格评分数据 |
| finalScore | Ref<number | undefined> | 最终评分数据 |
| scoreLevel | Ref<string | number | undefined> | 评分等级 |
| useTableMode | () => void | 切换到表格评分模式 |
| useFinalMode | () => void | 切换到最终评分模式 |
| isTableDisabled | Ref<boolean> | 表格评分是否禁用 |
| isFinalDisabled | Ref<boolean> | 最终评分是否禁用 |
| tableScoreTotal | Ref<number> | 表格评分总和 |
| tableScorePercentage | Ref<number> | 表格评分百分比 |
| updateScoreItem | (id, result) => void | 更新评分项目 |
| updateFinalScore | (score) => void | 更新最终评分 |
| clearTableScores | () => Promise<void> | 清空表格评分 |
| resetScores | () => void | 重置所有评分数据 |
使用示例
const {
scoreMode,
useTableMode,
useFinalMode,
isTableDisabled,
isFinalDisabled,
updateScoreItem,
updateFinalScore,
clearTableScores
} = useScoreInputModes({
enabled: computed(() => formData.value.complianceEvaluation === '1'),
totalScore: computed(() => totalScore.value),
scoreRules: {
thresholds: [0, 70, 85, 101],
levels: ['1', '2', '3', '4']
},
maxScore: 100,
onScoreChange: (score, level) => {
if (score !== null) {
formData.value.finalEvaluationScore = score;
formData.value.finalEvaluationLevel = level?.toString();
}
}
});
9. 组件集成指南
在将互斥输入模式API集成到组件中时，需要注意以下几点：
9.1 模式切换与禁用分离
正确的做法是将"模式切换"与"输入禁用"分离，不要仅仅因为切换了模式就立即禁用另一输入方式：
<template>
<!-- 表格评分输入 -->
<input
@focus="useTableMode()"
:disabled="tableScoreInputDisabled"
/>
<!-- 最终评分输入 -->
<input
@focus="useFinalMode()"
:disabled="finalScoreInputDisabled"
/>
</template>
<script setup>
// 关键点：禁用条件不直接使用模式状态，而是检查是否有实际数据
const tableScoreInputDisabled = computed(() =>
isManualScoreInput.value && hasFinalScoreValue.value
);
const finalScoreInputDisabled = computed(() =>
!isManualScoreInput.value && hasTableScoreValues.value
);
</script>
9.2 处理用户数据清空
当需要清空用户输入的数据时，应提供明确的确认机制，并只在必要时清空：
// 设置清空前确认
const {
/* ... */
} = useMutuallyExclusiveInputs(
['table', 'final'],
initialData,
{
confirmClear: async () => {
return await ElMessageBox.confirm(
'切换输入模式将清空已输入的数据，是否继续？',
'提示',
{ type: 'warning' }
).then(() => true)
.catch(() => false);
}
}
);
9.3 数据关联与计算
在评分场景中，表格评分与最终评分往往需要进行数据关联计算：
// 表格评分变化时自动计算最终评分
function handleTableScoreChange() {
tableData.value.forEach(item => {
if (item.scoreResult !== undefined && item.scoreResult !== null) {
updateScoreItem(item.id, Number(item.scoreResult));
}
});
// 自动计算最终评分逻辑会在updateScoreItem内部处理
}
10. 性能优化
在实际应用中，为了提高互斥输入组件的性能，我们采取了以下措施：
10.1 减少不必要的响应式计算
// 使用计算属性的惰性求值特性
const isDisabled = computed(() => {
// 先检查简单条件
if (disabled.value) return true;
// 复杂条件判断放在后面，避免不必要的计算
if (someCondition.value) {
return someLongComputation();
}
return false;
});
10.2 避免深层响应
对于大型数据结构，可以使用shallowRef或shallowReactive，只在顶层进行响应式追踪：
import { shallowRef } from 'vue';
// 对于大型表格数据，使用shallowRef避免深层响应
const tableData = shallowRef([/* 大量评分项 */]);
// 手动触发更新
function updateTable() {
tableData.value = [...tableData.value];
}
10.3 使用防抖/节流处理频繁变化
对于频繁变化的输入，使用防抖或节流技术减少更新频率：
import { useDebounceFn } from '@vueuse/core';
// 使用防抖函数处理频繁的评分更新
const debouncedUpdateScore = useDebounceFn((id, value) => {
updateScoreItem(id, value);
}, 300);
function handleScoreChange(id, value) {
debouncedUpdateScore(id, value);
}
11. 扩展与未来计划
我们计划对互斥输入模式API进行以下扩展：
11.1 支持更多数据类型
增强API对更多数据类型的支持，例如Map、Set、特殊对象等。
11.2 状态持久化
添加状态持久化功能，在页面刷新或会话结束后恢复用户输入：
// 未来计划示例：支持本地存储持久化
const { /* ... */ } = useMutuallyExclusiveInputs(
['table', 'final'],
initialData,
{
persistence: {
enabled: true,
storageKey: 'user-score-data',
storage: localStorage // 或sessionStorage
}
}
);
11.3 表单校验集成
与常见表单校验库（如Vee-Validate、FormKit等）进行更紧密的集成。
11.4 新增特化场景API
根据业务需求，计划开发更多特化场景的API，如：
usePaymentModes：支付方式选择useDeliveryModes：配送方式选择useSearchModes：搜索方式选择
12. 常见问题解答
Q1: 如何处理多于两种的互斥模式？
A: useMutuallyExclusiveInputs设计上支持任意数量的互斥模式：
const { activeMode, setMode } = useMutuallyExclusiveInputs(
['simple', 'advanced', 'expert', 'custom'],
{
simple: { /* ... */ },
advanced: { /* ... */ },
expert: { /* ... */ },
custom: { /* ... */ }
}
);
Q2: 如何在切换模式时保留部分数据？
A: 可以通过自定义clearData逻辑来实现：
// 在组件中处理
const clearCustomData = async (mode) => {
// 保留某些字段
if (mode === 'advanced') {
const commonFields = ['name', 'email'];
const currentData = { ...advancedData.value };
// 清空除了通用字段外的所有数据
Object.keys(currentData).forEach(key => {
if (!commonFields.includes(key)) {
currentData[key] = undefined;
}
});
advancedData.value = currentData;
return true; // 阻止默认清除逻辑
}
return false; // 使用默认清除逻辑
};
const { /* ... */ } = useMutuallyExclusiveInputs(
['simple', 'advanced'],
initialData,
{
onClearData: clearCustomData
}
);
Q3: 能否与其他组合式API一起使用？
A: 完全可以，Vue的组合式API设计理念就是可组合性。例如：
// 结合useForm和useScoreInputModes
const { form, validate } = useForm();
const { scoreMode, updateScoreItem } = useScoreInputModes();
// 结合useVModel处理双向绑定
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
const value = useVModel(props, 'modelValue', emit);
// 在表单提交前进行分数验证
async function submitForm() {
// 首先验证表单
const isValid = await validate();
if (!isValid) return;
// 然后检查评分数据
if (scoreMode.value === 'table' && tableScoreTotal.value === 0) {
ElMessage.warning('请至少评分一项');
return;
}
// 提交数据
// ...
}
结语
通过这套基于Vue3 Composition API的互斥输入模式解决方案，我们成功解决了传统方法中的痛点问题，提供了一种优雅、高效且可复用的实现方式。它不仅简化了开发流程，也提升了用户体验，避免了互斥输入场景中常见的困扰。
希望这篇文章能帮助你理解互斥输入模式的设计思路和实现方法，更好地应用到自己的项目中。如有任何问题或建议，欢迎在评论区留言讨论。
参考资料：
- Vue Composition API 官方文档
- Vue3 响应式原理
- 组合式函数最佳实践
