Vue页面级缓存方案feb-alive探讨，有何独到之处？

本文共计3928个文字，预计阅读时间需要16分钟。

获取feb-alive GitHub地址，体验链接，使用说明，开发者无需因动态路由或普通路由差异而手动初始化数据逻辑。例如，在beforeRouteUpdate或activated钩子中写入不同的初始化逻辑，开发者无需手动缓存页面状态。

feb-alive

github地址
体验链接

使用理由

• 开发者无需因为动态路由或者普通路由的差异而将数据初始化逻辑写在不同的钩子里beforeRouteUpdate或者activated
• 开发者无需手动缓存页面状态，例如通过localStorage或者sessionStorage缓存当前页面的数据
• feb-alive会帮你处理路由meta信息的存储与恢复

为什么开发feb-laive？

当我们通过Vue开发项目时候，是否会有以下场景需求？

• /a跳转到/b
• 后退到/a时候，希望从缓存中恢复页面
• 再次跳转到/b时，分两种情况
  • 情况一: 通过链接或者push跳转，则希望重新创建/b页面，而不是从缓存中读取
  • 情况二: 如果点击浏览器自带前进按钮，则还是从缓存中读取页面。

这个场景需求着重强调了缓存，缓存带来的好处是，我上次页面的数据及状态都被保留，无需在从服务器拉取数据，使用户体验大大提高。