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 提供了 include 和 exclude 属性，用于指定哪些组件需要被缓存或不被缓存。这两个属性的值可以是字符串、正则表达式或数组。
  • 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>

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