请教大家一个关于前端数据刷新策略的问题。主要的场景就是从列表进入详情页面，在详情页面修改了数据后返回列表数据如何刷新的问题。

[andy7076]

不知大家有没有具体解决此类问题的方案，如果知道的话请不吝赐教。不管是重新发起网络请求获取数据，还是利用状态管理本地处理修改后的数据，但我都不知道在何时怎样具体的处理才算是一个 BestPractice 。 类似的场景除了标题描述，还有类似于详情页进入修改页面，修改后返回详情页。往往列表页面都是分页获取数据，请考虑返回时列表的滑动和页码状态。

[redbuck]

mvvm 框架可以在跳之前把数据全部本地缓存.返回时从缓存取,另外还得恢复滚动高度.这是最简单粗暴的方案.

前端路由可以 keep-alive.

还有一种分片加载的方案.
将页面分为若干片,高度固定为 pagesize*item 高度.页面加载 /滚动时检查自身是否在视口(可以用 MutationObserver 实现).若在,则发起请求用数据替换占位图(数据来源无所谓,缓存也好,请求也罢,无关).
这样只需要记一个滚动高度即可,从详情跳回来与滚动到了再加载逻辑是一致的.

[andy7076]

@jy02534655 我觉得前者处理确实 ok，我确实忽略了后端可以直接返回修改后的数据，一直纠结产品新增后没有 id 的问题。 后者适用于中后台管理页面列表展示方式，不大适用于上拉加载更多这种列表的展示。 非常感谢分享，受益良多。

[redbuck]

@redbuck
分片加载需要后端配合下,新增一个接口,获取页面元数据,需要预先知道页面有几页.然后即可渲染页面,用占位图撑开高度.滚动开始之前就已经固定页面高度了.

[azcvcza]

做好列表浏览位置的标记？然后从详情回来不管有没有编辑，按存好的列表浏览位置参数去请求列表，再调整滚动。

[ByZHkc3]

方案一：重新发起请求拉数据。
方案二：返回修改成功后根据对应条目的 id 做单条数据的前端替换

[byzf]

缓存后直接等 success, success 后直接用缓存里的数据更新, 不重新请求.

服务端有其它客户端提交的更新, 用服务端推送, 客户端判断 id 是否重复再刷新.

[sjhhjx0122]

所以我们公司把详情全部都改成弹窗或者抽屉了,然后写了一个请求的 hooks,把分页记在了 hooks 里

[JayLin1011]

离开列表组件之后，列表组件会被销毁，在详情组件回来，本来就会触发生命周期钩子（一般是 created 或 mounted ）重新请求最新的数据。
如果没有执行生命周期钩子，说明有人用了 <keep-alive /> 对列表组件进行了缓存，事实上一般这种数据量较大的列表组件确实会进行组件缓存的，但也可以根据需求来灵活配置缓存策略。
组件缓存是涉及应用级别状态管理，可以结合 Vuex + 路由导航守卫根据需求自由配置，Vuex 负责管理全局的组件状态，路由导航守卫定制缓存方案。