代码比较

对比一下两种写法：

原始代码：

const checkedItemsCount = computed(() => {
    let total = 0
    categories.map(category => {
        total += category.items.filter(item => item.check).length;
    });
    return total
});

优化后的代码：

const checkedItemsCount = computed(() => {
    return state.categories.reduce((total, category) => 
        total + (category.items?.filter(item => item.check)?.length ?? 0), 0
    )
})

主要区别：

1. 空值安全性

• 原始代码：直接访问 category.items，如果 items 是 undefined 会报错
• 优化代码：使用 ?. 和 ?? 操作符处理可能的空值，更安全

1. 性能差异

• 原始代码：使用 map 但没有使用其返回值，实际上应该用 forEach
• 优化代码：使用 reduce 直接进行累加，减少了中间变量

1. 函数式编程

• 原始代码：使用命令式编程，维护外部变量 total
• 优化代码：使用函数式编程，无副作用，更容易测试和维护

1. 代码健壮性

// 原始代码可能出错的情况：
categories = undefined  // 报错
category.items = undefined  // 报错

// 优化代码能处理的情况：
state.categories = undefined  // 返回 0
category.items = undefined  // 返回 0

1. 内存使用

• 原始代码：需要额外的 total 变量
• 优化代码：直接在 reduce 过程中计算，无需额外变量

建议使用优化后的写法，因为它：

• 更安全（处理了空值情况）
• 更高效（减少了不必要的操作）
• 更易维护（函数式编程风格）
• 更简洁（代码更少但功能更强）