vue keep-alive的简单总结

下面我来为你详细讲解 “Vue Keep-alive 的简单总结”攻略。

什么是 Vue Keep-alive？

Vue Keep-alive是 Vue 组件中的一个内置组件。它的作用是用来缓存组件，能够保留它们的状态或避免重新渲染。通俗来说，就是把需要缓存的组件分别缓存起来，当需要重新渲染这些组件时，从缓存里面调用，而不是重新渲染一个新的组件。

Vue Keep-alive 指令的用法

基本用法

Vue 提供了一个 keep-alive组件，可以将需要缓存的组件包裹在其内部。

<keep-alive>
  <my-component></my-component>
</keep-alive>

其中 <my-component> 是需要缓存的组件。这里需要注意的是，如果需要让组件缓存生效，<my-component> 必须拥有 key 属性，即：

<keep-alive>
  <my-component :key="uniqueKey"></my-component>
</keep-alive>

与 v-if 相似，keep-alive 也可以和 v-show 配合使用来实现缓存和展示。

<keep-alive>
  <my-component v-if="showComponent"></my-component>
</keep-alive>

这里需要注意，v-if 和 v-show 在使用 keep-alive 缓存组件时是有区别的，v-if 会销毁组件实例，而 v-show 会仅仅隐藏或者显示组件。

控制缓存数量

如果 <keep-alive> 中的缓存组件数量超过 max 设置值，则最久未被访问的实例会被销毁：

<keep-alive :max="5">
  <my-component :key="uniqueKey"></my-component>
</keep-alive>

这里：<keep-alive>的max属性值被设为5，那么只会缓存最多五个组件实例。

重写触发条件

<keep-alive> 内部缓存的组件实例在切换时，默认会通过 activated 和 deactivated 这两个生命周期钩子来触发缓存和恢复缓存的操作。如果需要自定义触发组件缓存的情况，可以使用 include 和 exclude 属性。

<keep-alive :include="[ 'home', 'about' ]">
  <router-view />
</keep-alive>

这里，<keep-alive> 的 include 属性值设为 [ 'home', 'about' ]，那么只有在路由匹配到 /home 或 /about 时，才会缓存此组件。

示例说明

下面，我将为你展示两个使用 <keep-alive> 的示例说明。

示例 1：轮播图

轮播图是一个经典的页面元素，但是经常遇到的一个问题就是当用户浏览某个轮播图，在跳转回来时，轮播图重载了，因此不能在之前的位置继续播放。有了 <keep-alive> 解决这个问题就非常简单了。

<keep-alive>
  <swiper-slide v-for="(item, index) in slides" :key="`slide_${index}`">
    <img :src="item.src" />
  </swiper-slide>
</keep-alive>

这是一个轮播图组件，对每个轮播图片进行缓存，这样每次轮播图轮播展现之前，都不会重新发起加载图片的请求。

示例 2：后台管理页面

后台管理页面中有很多数据的展示，如果每次切换页面都要重新加载数据，这会给服务器带来很大的负担。使用 <keep-alive>，可以解决这个问题。

<template>
  <div>
    <keep-alive>
      <router-view :key="routeKey"></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
      routeKey: null
    };
  },
  watch: {
    $route(to, from) {
      if (to.path !== from.path) {
        this.routeKey = to.path;
      }
    }
  }
};
</script>

这个示例是一个后台管理系统中的路由页面。通过监听 $route 变化，将当前路由地址 to.path 赋值给 routeKey，并在 <keep-alive> 组件上通过 :key 绑定访问的路由组件。这样就能够在跳转路由之间缓存当前页面数据了。

以上就是一份关于“Vue Keep-alive的简单总结”的攻略，希望能对你有所帮助！