直接用 innerHTML 替换会丢失事件监听，因为原 DOM 节点被销毁导致绑定的监听器消失；应改用 replaceChildren() 或事件委托，并封装渲染逻辑只更新数据。
为什么直接用 innerHTML 替换会丢失事件监听？
很多初学者在仪表盘里用 fetch() 拿到新 HTML 片段后，直接赋值给 document.getElementById('chart-container').innerHTML = responseText，结果发现按钮点不了、下拉框不响应——因为原 DOM 节点被销毁，绑定在其上的事件监听器一并消失。
解决思路不是“重绑一次”，而是避免粗暴替换。推荐两种做法：
- 只更新数据部分：把图表渲染逻辑封装成函数（如
renderTemperatureChart(data)），AJAX 回来只传 JSON，再调用该函数重绘 - 若必须更新 HTML 片段，用
replaceChildren()替代innerHTML，它保留父节点引用，便于后续统一管理事件委托 - 所有交互控件（如刷新按钮、时间筛选器）的事件应通过事件委托绑定在不会被替换的父容器上，比如：
dashboardContainer.addEventListener('click', handleAction)
如何防止并发请求导致的数据错乱？
仪表盘常有多个组件同时轮询（如 CPU 占用率、内存使用量、请求延迟），若用户快速切换时间范围或点击刷新，容易出现“后发先至”：新请求返回得慢，旧请求返回得快，结果界面显示的是过期数据。
关键不是禁用按钮，而是给每次请求打标记：
- 每次发起
fetch()前生成唯一abortController = new AbortController()，并保存其signal到组件实例上 - 发起新请求前，先调用上一个
abortController.abort()（需捕获AbortError不报错） - 在
then()或async/await的处理逻辑开头加判断：if (abortController.signal.aborted) return，避免过期响应误更新 UI
fetch() 在仪表盘中该用 GET 还是 POST？
多数人默认 GET，但实际要看参数复杂度和语义：
- 纯时间范围筛选（如
?from=2024-01-01&to=2024-01-31）用 GET，方便缓存、调试、分享链接 - 带复杂过滤条件（如多选标签、嵌套 JSON 查询结构、超过 2000 字符的参数）必须用 POST，否则 URL 截断或 Nginx 414 错误
- 注意：即使 POST，也建议服务端支持幂等性，前端可加
cache: 'no-store'避免浏览器缓存 POST 响应 - 不要为“看起来更安全”而强行用 POST，GET 参数明文传输本身不增加风险——仪表盘本就依赖登录态和 HTTPS
局部更新时如何保持 loading 状态准确？
常见错误是全局加一个 loading = true，结果某个模块卡住，整个仪表盘一直转圈。更合理的方式是按模块独立控制：
- 每个可刷新区域（如
#cpu-chart、#error-rate-table）对应一个data-loading="true"属性 - AJAX 开始时设
element.setAttribute('data-loading', 'true')，成功/失败后移除 - CSS 用属性选择器控制样式：
[data-loading="true"]::before { content: "↻"; }，比 JS 控制 class 更轻量且无竞态 - 避免在
finally块统一关闭 loading——网络超时或解析失败时也要及时释放状态
真实项目里最易被忽略的是 abort 信号与组件生命周期的对齐：React/Vue 组件卸载后，忘记清理 AbortController，会导致内存泄漏和静默失败。手写仪表盘时，务必在组件销毁逻辑里调用 abortController.abort()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
