常见原因是dom未重新渲染或新数据未正确拼接；应避免innerhtml+=，改用documentfragment批量插入；按钮需绑定请求生命周期禁用并恢复；分页推荐游标而非offset，前后端limit须严格一致。
点击按钮后列表不更新，但控制台没报错
常见原因是 DOM 没重新渲染，或者新数据没正确拼接到原有列表里。JavaScript 里直接用 innerHTML += 看似简单，但会销毁并重建所有子节点，导致已绑定的事件监听器丢失、焦点丢失、甚至触发重排（reflow）——尤其在列表项有输入框或开关时，体验会明显异常。
推荐做法是用 document.createElement + appendChild 或批量用 DocumentFragment 插入：
const fragment = document.createDocumentFragment();
data.forEach(item => {
const li = document.createElement('li');
li.textContent = item.title;
fragment.appendChild(li);
});
listElement.appendChild(fragment);
- 避免反复操作 DOM，性能更好
- 保留已有节点状态（比如 checkbox 是否勾选）
-
fragment插入后只触发一次重排
加载中状态没反馈，用户狂点按钮
按钮没禁用、没加 loading 文案或 spinner，会导致重复请求或 UI 错乱。关键不是“加个 loading”，而是把按钮状态和请求生命周期绑定死。
实操建议：
- 点击后立刻设
button.disabled = true，同时修改textContent或插入<span class="loading"></span> - 请求成功/失败后，必须恢复按钮状态：
button.disabled = false - 用
AbortController配合 fetch，防止上一个请求还没结束，新请求又发出去
漏掉恢复 disabled 是最常踩的坑——用户以为没点上，连点三次，后端收到三份相同 offset 的请求。
滚动到底部自动加载 vs 点击按钮加载，该选哪个？
这不是技术问题，是交互意图问题。按钮加载更可控：用户明确想“看更多”，适合内容分块清晰、翻页语义强的场景（如文章归档、商品分类页）。滚动加载更适合信息流，但对 SEO、可访问性（screen reader）、打印样式都不友好。
如果产品确定用按钮，注意两点：
- 按钮要放在列表末尾且有足够视觉留白，别被内容遮住或挤到视口外
- 加载完若无新数据，应隐藏或禁用按钮，并提示“没有更多了”——别留个可点但无效的按钮
- 服务端返回空数组时，前端不能假设是错误，要主动判断
response.data.length === 0
后端分页参数传错导致重复或漏数据
常见错误是前端用 page=1,2,3... 但后端实际需要 offset=0,10,20...，或者忘了把上次请求的 limit 固定下来。一旦 offset 计算错，轻则重复加载同一批数据，重则跳过中间几条。
安全做法：
- 前端维护一个
nextOffset变量，初始为 0；每次请求后更新为currentOffset + currentData.length - 后端响应里带上
has_more: true/false字段，比前端自己猜更可靠 - 不要依赖客户端传的
page做游标，尤其当数据可能被删除或插入时
游标（cursor）比 offset 更稳，但需要后端支持。如果只能用 offset，务必确保前后端对“每页几条”完全一致，且这个值写死在前后端代码里，别一个写 10 一个写 20。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
