使用 keep-alive实现页面缓存有些页面还要及时更新的方法两种方法

谁践踏了优雅 2023-06-13 08:57 14阅读 0赞

1、keep-alive要配合router-view使用，这里要注意一点就是，keep-alive本身是vue2.0的功能，并不是vue-router的，所以再vue1.0版本是不支持的。keep-alive官方文档点这里，代码实现如下，router-view是在入口APP.vue里面

在这里插<template>
      <div id="app">
    
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
    
        
      </div>
    </template>入代码片

2、这样就会实现组件的缓存，但是有个缺点就是所有组件都会被缓存，可是现实中就是我们有些页面还是要及时刷新的，比如列表数据，想要查看详情的时候都是共用一个组件，只是刷新页面，所以这个共用的组件是不能够缓存的，不然会造成点其他的条目都是之前缓存的数据。那要怎么自定义呢，那就要在router-view里面多加个v-if判断了，然后在router定义的文件里面在想要缓存的页面多加上“meta:\{keepAlive:true\}”，不想要缓存就是“meta:\{keepAlive:false\}”或者不写，只有为true的时候是会被keep-alive识别然后缓存的。

3、在router文件加上meta判断

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    export default new Router({ 
        { //home会被缓存
            path:"/home",
            component:home,
            meta:{ keepAlive: true}
        }
        { //hello不会被缓存
            path:"/hello",
            component:hello,
            meta:{ keepAlive: false}
        }
    })

想要看有没有缓存成功，可以在各个组件的created钩子里面打印输出标志，缓存成功就是首次进入页面，created会请求数据，后面就不会再次请求而是直接调用缓存的

添加了缓存可以大大减少对系统性能的损坏，毕竟做数据处理型的系统，数据过于庞大，每次都要请求一下页面是很不好的，有了缓存，该缓存的缓存，不想缓存也可以实时刷新

**利用生命周期解决缓存 有些页面还要及时刷新**  
keep-alive可以缓存路由,请求相同时不再发送请求。

activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在。  
当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。  
事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中， activated 中的不管是否需要缓存多会执行。