Troubleshooting

常见问题与解决方案 / Common issues and solutions.

目录 / Table of Contents

内存占用过高 / 浏览器卡死（大数据量场景）

Issue #13: 内存占用过高 / 浏览器卡死（大数据量场景）

标签 / Labels: performance, answer
状态 / Status: ✅ 已解决 / Resolved
Issue 地址: #13 Memory leak and high CPU use → 已转为 Discussion #16

现象

在加载约 80+ 条任务数据时，页面出现严重卡顿、内存持续增长甚至浏览器崩溃。

根本原因

问题不在组件本身，而在于调用方的数据绑定方式：

使用 reactive 深层包裹任务数组 — Vue 会为数组内每一个对象建立深层侦听器，数据量较大时侦听器数量爆炸，导致内存超过 10 GB。
日期格式错误 — API 返回 ISO 日期时间字符串（如 "2026-03-07T08:34:00.230"），但组件要求纯日期格式（"2026-03-07"）。

解决方案（来自 @eldrift）

1. 使用 `shallowRef` 替代 `reactive` 存储任务列表

// ❌ 错误 — 深层响应性，性能灾难
const data = reactive({ tasks: [] as Task[] })

// ✅ 正确 — Vue 只监听数组引用，不深入每个对象
const tasks = shallowRef<Task[]>([])

2. 截断 ISO 日期时间为纯日期格式

tasks.value = res.data.map((t: Task) => ({
  ...t,
  startDate: t.startDate?.substring(0, 10) ?? t.startDate,
  endDate:   t.endDate?.substring(0, 10)   ?? t.endDate,
}))

3. 使用正确的 Task 类型

确保传入组件的数据符合 Task 接口定义，避免类型不匹配导致的隐性计算开销。

参考

完整讨论与报告：Discussion #16
原始 Issue：#13 Memory leak and high CPU use

反馈 / Feedback

如果遇到未收录的问题，欢迎提交 Issue：

2.4 KiB Raw Permalink Blame History Unescape Escape