Vue.js--keep-alive用法

keep-alive 是 Vue.js 提供的一个内置组件,用于缓存动态组件或路由组件,避免组件在切换时被反复创建和销毁,从而提高应用的性能和用户体验。

在我们用Vue.js做移动端开发的时候,经常会遇到这样的应用场景:

  • 首先,让用户看到新闻列表;然后点击新闻标题,切换到新闻详情的组件,以展示新闻详情。
    很多应用场景都于此类似,比如先进入商品列表,点击某一个商品条目,则切换到商品详情的组件。

  • 这种场景往往会碰到一个问题,当我每一次从详情组件退回到列表组件的时候,列表组件会重新发出ajax请求。考虑到下面2条原因,总觉得这么不好。

    1. 列表组件上的数据不会在短短几分钟之内就更新,完全没必要每次都发出ajax请求。这样势必降低用户体验
    2. 浪费移动设备的流量。(如果流量无限,这条可以无视)
  • 总之,即使只有第1条原因,我们也应该不让它每次退回到列表页的时候都重新发出ajax请求。

如何解决这个问题?

可以使用Vue.js自带的keep-alive

  • keep-alive用法

是Vue的内置组件,包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

  • 它使用的时候非常简单,示例代码如下:
 <keep-alive>
    <router-view></router-view>
    <!--这里是会被缓存的组件-->
</keep-alive>

这里需要说明的是,本示例是使用了vue-router的,所以这里的keep-alive中放了1个router-view。
这是最简单的用法。这样会使所有在vue-router中渲染的组件,全部都将状态保留在内存。
如果你只想缓存部分组件的状态。那么可以使用keep-alive的include属性。

  • keep-alive 提供了 includeexclude 属性,用于指定哪些组件需要被缓存或不被缓存。这两个属性的值可以是字符串、正则表达式或数组。
    • include: 只有名称匹配的组件会被缓存。
    • exclude: 名称匹配的组件不会被缓存。

例如,我们有组件newsList和newsInfo,imageList和imageInfo,但是我们只想缓存newsList和imageList这2个列表组件的数据。那么可以这么使用

 <keep-alive include="newsList,imageList">
    <router-view></router-view>
</keep-alive>

然后还有一步,必须在需要被缓存状态的组件的script部分,给组件添加一个name属性。例如:

以newsList.vue组件为例

<template>
    <!-- 这里是newslist组件的html结构部分 -->
</template>
<script>
export default {
    name: "newsList",  //如果使用了keep-alive缓存该组件状态,则此组件必须有这个属性。
    data(){
        return {}
    }
</script>

需要说明的是,如果没有使用keep-alive缓存状态的组件,可以不写这个属性。但是如果使用了keep-alive缓存该组件状态,则此组件必须有这个属性。并且,这个属性的值,还必须跟标签中include属性的值完全一致,包括大小写。

生命周期钩子

当组件被 keep-alive 缓存时,会有两个特殊的生命周期钩子函数:

  • activated:当组件被激活时调用,即组件从缓存中重新显示时触发。
  • deactivated:当组件被停用时调用,即组件被缓存起来时触发。
<template>
  <div>
    This is ComponentA.
  </div>
</template>

<script>
export default {
  activated() {
    console.log('ComponentA is activated');
  },
  deactivated() {
    console.log('ComponentA is deactivated');
  }
};
</script>

结合路由使用

在 Vue Router 中使用 keep-alive 可以缓存路由组件。通常在 App.vue 中使用:

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" :key="$route.fullPath"></component>
      </keep-alive>
    </router-view>
  </div>
</template>

这里使用了 v-slot 来获取 router-view 渲染的组件,然后用 keep-alive 进行包裹,实现路由组件的缓存。同时,通过 :key=“$route.fullPath” 确保在路由切换时能正确识别不同的路由。

最大缓存实例数

keep-alive 还提供了 max 属性,用于限制缓存组件的最大数量。当缓存的组件数量超过 max 指定的值时,最早缓存的组件会被销毁。

<keep-alive max="2">
  <component :is="currentComponent"></component>
</keep-alive>

在这个例子中,最多只会缓存两个组件实例。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值