懒加载情况下，更改某一页某一条数据后，如何做到页面位置不变实时更新的4种方法

例如：

我向后台请求数据，，共12条数据，每页是5条数据，一共3页，即请求3次，用懒加载实现。

第一次我请求第1页，把拿到的5页数据存在dataList中，然后渲染出来。
当用户拉到底部，我请求第2页数据，通过concat()方法存在dataList中，再次渲染5条数据。
当用户再次拉到底部，我请求第3页数据，第3页只有2条数据，通过concat()方法存在dataList中，然后渲染在列表中。

这时候，用户编辑了第2页的第2条数据，即dataList的第7条数据，用户确定编辑，我向后台发送请求，后台返回编辑成功。那么页面如何做到编辑成功后页面位置不动，实时更新？

尝试解决方案：

1. 清空dataList数组，重新获取第一页数据，相当于刷新页面。（不需要后端配合,但是刷新页面后当前位置就会变动，可以通过添加锚点定位解决。但是因为相当于刷新页面，所以会有闪动的问题）
2. 判断到了用户更改的是第2页第2条数据，然后根据这条数据的id，发送请求获取这条数据的详细信息，直接更新到dataList数组中。如果使用vue会双向绑定自动更新，如果原生js就重新渲染即可。（需要后端有根据id获取数据详情的方法）
3. 清空dataList数组，判断用户当前请求到了第3页，然后一次性请求后台3页的数据，赋值给dataList。如果使用vue会双向绑定自动更新，如果原生js就重新渲染即可。（需要后端有一次性请求n页或n条数据方法）
4. 判断编辑的数据在dataList数组的index，编辑成功后直接把用户编辑的值赋给当前数据，相当于不走后台。如果使用vue会双向绑定自动更新，如果原生js就重新渲染即可。（不需要后端配合）

目前我想到的就是这四种方法了，其中最简单方便的，毫无疑问就是第4种了，但是不通过后端取值，前端自己更改数据，按道理来说是不太对的。不过如果后端返回编辑成功的话，那么前端更改后的数据也一定是和后端保持一致的。

题外话：

在页面已经有渲染过数据的情况下，重新渲染数据时页面是不会出现闪烁的，比如页面原先渲染的内容是**1，2，3，4，5，改为1，2，3，1，2，**我们能看到的就是4，5一下变成了1，2，而1，2，3彷佛没有变化过。

这和vue 的 v-for“就地复用”策略毫无关系。而是因为：

渲染数据到页面的时候，只是html结构替换的过程，不存在等待时间，这就像是换个颜色，替换过程是察觉不到的。

阅读完成

如果对渲染数据有不太明白的，请参阅我的这篇博客：渲染数据的时候，浏览器到底发生了什么？

关于懒加载的问题，请参阅我的这篇博客：用了那么久的懒加载，真的是简简单单的技术吗？

我是南极大冰块，一个技术与颜值成正比的前端工程师，崇尚一针见血的搞定前端问题，希望我的博客有帮助到了你。关注我，前端路途一起走。嘿哈~😛