keep-alive结合store按需进行页面缓存和释放

1、keep-alive作用：主要用于保留组件状态或避免重新渲染

（页面不重新渲染，接口也就没有重新调用，节省网络资源，提高性能）
keep-alive包裹动态组件，自身不会渲染一个 DOM 元素
常用属性
include 只有名称匹配的组件会被缓存。
exclude 任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

include 、exclude 允许组件有条件地缓存。3种写法



匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配路由中的name

image.png

2、keep-alive用法

在动态组件中的应用

在vue-router中的应用

3、keep-alive相关钩子

activated 当keepalive包含的组件再次渲染的时候触发
deactived 当keepalive包含的组件销毁的时候触发
生命周期执行顺序：
（1）、不使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> destroyed
（2）、使用keep-alive的情况：beforeRouteEnter --> created --> mounted --> activated --> deactivated
（3）、使用keep-alive，并且再次进入了缓存页面的情况：beforeRouteEnter -->activated --> deactivated

activated 的使用场景。页面A是表单，有一项是地址，点击地址跳到详细地址B页面填写完回到A页面。A页面是缓存的。只需要修改A页面中的地址，使用activated函数接收、改写地址

4、使用keep-alive的场景：

（1）带筛选的查询列表A，点击筛选按钮跳详情，再跳回，想要保留A的筛选列表
（2）按步骤注册表单中的上一步、下一步需要缓存：

image.png

(3)form表单A，地址要跳到B页面详细填写，完事返回A页面，A页面需要缓存，地址需要局部更新
(4)浏览网页到中间部分，跳转到其他页面再次返回时还是之前位置

5、结合meta使用keep-alive

路由中区分，组件是否需要被缓存

{
      path: '/list',
      name: 'List',
      component: List,
      meta: {
        keepAlive: true // true需要被缓存 false不被缓存
      }
}

6、同一个页面有时候被缓存，有时候不被缓存

结合vuex将需要缓存的页面进行管理

image.png

原理：
进入B存入store，由B到A，删除store
A => B 也需要删除store，是下面beforeEach说的情况
App代码

注意：cachePage 不能用data定义，相当于只取了一次，死值

  computed: {
    cachePage () {
      return this.$store.state.cachePage
    }
  },

知识点：
router.beforeEach 和 B页面中beforeRouteEnter 执行数序
先进入router.beforeEach，再进入beforeRouteEnter
beforeEach也是需要的，避免当form表单填完，进入C页面后，C=>A,A=>B

router.beforeEach((to, from, next) => {
  if (to.name === 'userForm' && from.name === 'list') {
    store.commit('delCachePage', 'userForm')
  }
  next()
})

B页面中

  beforeRouteEnter (to, from, next) {
    next(vm => { 
      // 通过 vm 访问组件实例
      // 因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      // 从list => form 包括第一从list进，包括从form返回list，再从list进 ，都不要form有缓存 
      // 从editAddr => form 需要缓存
        if (vm.$store.state.cachePage.indexOf('userForm') === -1) {
            vm.$store.commit('addCachePage','userForm')
        }
    })
  },
  beforeRouteLeave (to, from, next) {    
    console.log('leave',to.name) 
    if(to.name === 'list'){
      this.$store.commit('delCachePage','userForm') 
    }
    next();
  },

另外对于在beforeEach中使用to.meta.keepAlive = false的说法测试并不好用