vue 实现页面后退是缓存之前的数据并实现部分数据更新

实现缓存

1. 在路由文件router.js中针对要缓存的页面进行设置
   添加keepAlive: true，通过此字段判断是否需要缓存当前组件

{
        path: '/club',
        name: 'Club',
        component: Club,
        meta: {
            title: 'Club',
            keepAlive: true
        }
    },

2. 在app.vue文件中添加 ：

  <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>

$route.meta.keepAlive表示在1中配置缓存的页面进行缓存

实现缓存页面局部的数据更改

这样基本的功能已经实现了，但是还是不能满足我们的需求
这样的界面缓存是对全部数据的缓存，相当于再次跳转这个界面是不进行任何钩子函数的操作，但是我们的需求是，这个界面中的部分数据要动态更新，返回这个页面时本页面数据缓存且还是页面之前的滚动位置

使用

在club界面（就是使用缓存的界面，添加这样的钩子函数，实现对当前界面的更新）

activated(){
        this.active = 1
        this.num = 1
    },

解析：

官网解释：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染

场景

如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子。

在以下场景中使用keep-alive组件会显著提高用户体验，菜单存在多级关系，多见于列表页+详情页的场景如：

1. 商品列表页点击商品跳转到商品详情，返回后仍显示原有信息
2. 订单列表跳转到订单详情，返回，等等场景。

keep-alive的生命周期

1. 初次进入时：created > mounted > activated；退出后触发 deactivated
2. 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

所以通过官网提供的钩子函数activated，我们可以对已缓存的界面进行动态的局部的更新操作