利用Vue中keep-alive，快速实现页面缓存

Posted 2023-04-10

参考技术A 有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

缓存所有页面

根据条件缓存页面

1.在 router 目录下的 index.js 文件里

1. activated

在 keep-alive 组件激活时调用
      该钩子函数在服务器端渲染期间不被调用

2. deactivated

在 keep-alive 组件停用时调用
      该钩子在服务器端渲染期间不被调用

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。

vue页面缓存（keepAlive）

参考技术A 同人博客搬迁~~~~（播客主页： https://www.cnblogs.com/epines/ ）

页面缓存在页面中长期会使用到，可以更快速的在页面切换期间的资源获取

主要是用keep-alive实现

在vue项目中，相关的写法比较多，还有一些注意点需要仔细

第一种方式

在App.vue中

添加标签

  <keep-alive>

      <router-view />

  </keep-alive>

　这会就是所有的页面都会被缓存

这里做了两个页面的相互跳转，分别写了一个输入框，在输入内容后，跳转时，输入的内容因为缓存的原因会被保留

 如果存在某些页面需要缓存，那么可以通过keep-alive的属性去处理

其中就是include和exclude

　　include：名称匹配的组件才会被缓存，其中可以写字符串或正则表达式

　　exclude：名称匹配的组件不会被缓存，其中同样是字符串或正则表达式

这里的名称是指组件的名称

<script>

export default

  name: 'HelloWorld'



</script>

     第二种方式：

     在路由中进行设置通过添加meta，route/index.js     

export default new Router(

  routes: [

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld,

      meta:

        keepAlive: true // 该路由会被缓存

     

    ,

   

      path: '/ss',

      name: 'ss',

      component: Ss,

meta:         keepAlive:false // 该路由不会被缓存，不需要缓存的时候该属性可以不用写     

]

)

这时候页面还需要通过该属性进行判断是否缓存

在App.vue  

  <keep-alive>

      <router-view v-if="$route.meta.keepAlive">

      </router-view>

    </keep-alive>

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

    </router-view>

　　这样写有个优点就是，需要缓存不需要缓存的name可以随便写，不需要做什么规律性的去写出一个合适的正则去匹配上，就会更加灵活些

 常见的应用场景可以是，列表到详情页，从详情页返回到列表页，如果说列表页没有做缓存，在单页面下，会直接返回列表首页（存在分页的情况），就不能直接返回至之前离开的列表页，所以这个地方在列表页添加页面缓存后，可以做到返回至之前离开的列表页

 没有缓存的时候，返回列表：

 有缓存的时候，返回列表

所以从某些程度上来讲，即增加了页面的响应速度，又增加了用户体验，总体来说，还是比较实用的