layui分页在vue中需手动桥接：必须在mounted中调用laypage.render()，jump回调内用if(!first)判断并显式触发数据加载，更新datalist后用$nexttick确保dom同步，且不可在created中初始化或在jump里重复render。
不能直接用 layui.use('laypage') 初始化后就完事——Vue 的响应式数据和 Layui 的 DOM 操作是两套体系，不手动桥接，分页点击后表格不会更新，页码状态也不同步。
分页初始化必须在 Vue mounted 后触发
Layui 的 laypage.render() 是纯 DOM 操作，它不感知 Vue 数据变化。如果在 Vue 实例创建前或 data 未就绪时调用，jump 回调里拿到的 this 可能不是 Vue 实例，导致 this.dataList 读不到或更新无效。
- 必须在
mounted()钩子中调用layui.use('laypage', ...) - 确保
dataList已声明（哪怕初始为[]），否则v-for渲染会报错 - 不要在
created()里初始化 laypage，此时 DOM 还没挂载，elem: 'pagination'找不到容器
jump 回调里必须手动触发数据重载，且避免死循环
jump 是 laypage 唯一的数据联动入口，但它的默认行为只传参，不执行任何业务逻辑。常见错误是把请求函数写在 jump 外层，导致切换页码时根本不调用。
- 每次
jump必须显式调用你的数据获取方法，比如fetchData(obj.curr, obj.limit) - 加
if (!first)判断：首次渲染由 Vue 的mounted触发，jump里只处理后续翻页 - 切勿在
jump里再次调用laypage.render()，会造成无限递归
表格数据更新后，必须用 $nextTick 确保 DOM 渲染完成再操作
Vue 更新 dataList 是异步的，而 laypage 的 count、curr 等参数需要真实数据长度和当前页码。如果在赋值后立刻调用 laypage.render()，可能拿到旧值。
- 在
fetchData的 success 回调里，先赋值this.dataList = res.data，再调用this.totalCount = res.total - 然后用
this.$nextTick(() => { /* 此时 v-for 已完成渲染 */ })包裹后续逻辑（如高亮当前行、滚动定位） - 如果要动态更新 laypage 实例（比如改
count），需先用laypage.render({ ... })重新渲染，不能只改变量
兼容性坑：Layui 2.x 不支持 Vue 3，且全局变量需 eslint 白名单
Layui 依赖 jQuery 和全局 layui 对象，与 Vue 3 的 Composition API 和 Proxy 响应式系统存在底层冲突。目前所有稳定可用的集成案例都基于 Vue 2 + Layui 2.8/2.9。
- Vue 3 项目中强行引入
layui.js会导致layui.use报错或静默失败 - 在
.eslintrc.js中必须添加globals: { layui: true }，否则layui.use会被标为未定义变量 - 不要试图用
ref或reactive包裹layui对象——它不是响应式对象，也不该被代理
真正难的不是写几行 laypage.render，而是每次数据变动后，你得同时维护 Vue 的响应式链、Layui 的 DOM 状态、以及两者之间那层脆弱的手动同步逻辑。稍有疏漏，就会出现“页码变了但表格没变”或者“点了下一页又跳回第一页”这类问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
