说说 Vue 中组件的缓存

以前在《Vue一个案例引起的动态组件与全局事件绑定总结》这篇文章中简单提到过组件的缓存。当时只是简单的提供了一个解决问题的思路，并无说到多少组件缓存的东西，今天咱们就来详细说说组件的缓存。

组件化开发模式下，咱们会把整个项目拆分红不少组件，而后按照合理的方式组织起来。

天然就存在组件之间的切换问题，Vue 中有个「动态组件」的概念，它可以让咱们更好的实现组件的切换。

在实际的项目开发中，产品是不可能放过咱们的，需求老是在不停的变化，若是你碰到那些不改需求的产品就嫁了吧，太可贵了。

最近项目中须要实现一个保留上一次Tab 页的功能。以下图，当我选择 B 组件时，我但愿从首页切换到设置页时，还会停留在 B 组件，而不是从新渲染为默认的 A 组件。

首先咱们可使用内置组件 <component>实现动态组件的效果。

<template>
  <div>
      <button
        v-for="tab in tabs"
        :key="tab"
        @click="currentTab = tab"
      ></button>
    <component :is="currentTab"></component>
  </div>
</template>
<script>
export default {
  name: "Tab",
  data() {
    return {
      currentTab: "A",
      tabs: ['A','B']
    };
  }
};
</script>
复制代码

这时，咱们作到了两个组件之间的切换，但动态组件在切换的过程当中，组件的实例都是「从新建立」的，而咱们须要保留组件状态。

为了解决这个问题，你还须要使用 vue 内置组件 <keep-alive>。

keep-alive

keep-alive 包裹「动态组件」时，会缓存不活动的组件实例，而不是销毁它们。它是一个抽象的组件，它自身不会渲染成一个 DOM 元素，也不会出如今父组件链中。

值得注意的是 「动态组件」这四个字，它只有在包含动态组件时，才会产生效果。若是不是动态组件则会无效。好比下面这种用法是没有效果的。

<keep-alive>
    <my-component></my-component> </keep-alive> 复制代码

既然如此，咱们来看看 keep-alive 经常使用的几种方式：

方案一： 使用内置组件 <component>。

<keep-alive>
  <component :is="view"></component>
</keep-alive>
复制代码

方案二： 当出现条件判断时的子组件

<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
复制代码

方案三： 结合路由使用时

<keep-alive>
     <router-view></router-view> </keep-alive> 复制代码

以上三种方式组件都会被缓存。另一点须要注意的是，<keep-alive> 只能用在只有一个子组件的状况。若是你在其中有 v-for 则不会产生效果。

明白了如何使用 <keep-alive> 时，想要保留咱们的 Tab 页，咱们只需这么作便可。

<keep-alive>
    <router-view></router-view> </keep-alive> 复制代码

可是这里你会发现，咱们把每个组件都缓存了起来，不只案例中的「设置页」被缓存连「首页」也一块儿被缓存了起来，这不是咱们想要的。

vue 帮咱们也考虑到了这一点，因此咱们能够选择性的进行组件的缓存，也就是说你想让谁缓存，就让谁缓存，很是的自由与可配置。

缘由是由于 <keep-alive> 提供了两个属性 include 与 exclude。

• include：只有名称匹配的组件会被缓存。
• exclude：任何名称匹配的组件都不会被缓存。

两者均可以用逗号分隔字符串、正则表达式或一个数组来表示。

<keep-alive include="a,b"></keep-alive>
<keep-alive :include="/a|b/"></keep-alive>
<keep-alive :include="['a', 'b']"></keep-alive>
复制代码

因此，结合 <keep-alive> 的 include 或 exclude属性，咱们就能够轻易的选择须要缓存的组件。

<keep-alive include="system">
    <router-view></router-view> </keep-alive> 复制代码

这样咱们就能够只缓存「设置页」，而后实现保留上次选择的 Tab 页。

欢迎公众号：六小登登，与我一块儿交流。