keep-alive的使用注意点

今天药忘吃喽~ 2021-08-13 22:23 376阅读 0赞

项目中存在组件之间的切换问题，Vue 中有个「动态组件」的概念，它能够让我们更好的实现组件的切换。

在实际的项目开发中，产品是不可能放过我们的，需求总是在不停的变化，如果你碰到那些不改需求的产品就嫁了吧，太难得了。

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

首先我们可以使用内置组件 实现动态组件的效果。

<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 包裹「动态组件」时，会缓存不活动的组件实例，而不是销毁它们。它是一个抽象的组件，它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

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

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

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

方案一： 使用内置组件 。

<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>

以上三种方式组件都会被缓存。另外一点需要注意的是， 只能用在只有一个子组件的情况。如果你在其中有 v-for 则不会产生效果。

明白了如何使用 时，想要保留我们的 Tab 页，我们只需这么做即可。

<keep-alive>    <router-view></router-view>  </keep-alive>

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

vue 帮我们也考虑到了这一点，所以我们可以选择性的进行组件的缓存，也就是说你想让谁缓存，就让谁缓存，非常的自由与可配置。

原因是因为 提供了两个属性 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>

所以，结合 的 include 或 exclude属性，我们就可以轻易的选择需要缓存的组件。

<keep-alive include="system">    <router-view></router-view>  </keep-alive>

这样我们就可以只缓存「设置页」，然后实现保留上次选择的 Tab 页

发表评论取消回复

表情：

评论列表（有 0 条评论，376人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中keepAlive的使用

在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓

﹏ヽ暗。殇╰゛Y/ 2023年10月11日 14:17/ 0 赞/ 50 阅读

相关 keep-alive的使用及注意点

以Vue提供了一个内置组件`keep-alive`来缓存组件内部状态，避免重新渲染。（在开发Vue项目的时候，有一部分部分组件是没必要多次渲染的） keep-alive属性：

约定不等于承诺〃/ 2022年12月16日 13:07/ 0 赞/ 150 阅读

相关 MySQL使用注意点

MySQL使用注意点概述 sql执行顺序 LIMIT 隐式转换概述 mysql作为我们日常使用的RDBMS，但是在使用过程中还是有一些

比眉伴天荒/ 2022年11月20日 08:28/ 0 赞/ 208 阅读

相关使用mysql 注意点累积

1.今天遇到一个问题，有一个实体，其中他有一个字段为values 结果报错。。。mysql 数据库字段不能为values 否则会报错后续累积自己在开发

- 日理万妓/ 2022年09月18日 15:42/ 0 赞/ 177 阅读

相关 MongoDB使用中的注意点

1.MongoDB主键\_id 在我一开始接触MongoDB的时候我觉得无论是什么数据库都是有主键的，而且可以自定义，直到遇到了MongoDB。没有人会喜欢被强制使用“\_i

待我称王封你为后i/ 2022年05月15日 01:29/ 0 赞/ 210 阅读

相关 OpenEvent的使用注意点

我的测试代码如下 HANDLE hTest = CreateEvent(NULL, FALSE, FALSE, "Global\\Hello"); //Hand

痛定思痛。/ 2022年04月11日 06:56/ 0 赞/ 353 阅读

相关跨域jsonp的使用注意点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

梦里梦外;/ 2022年02月23日 02:46/ 0 赞/ 206 阅读

相关使用CefSharp的一些需要注意的点

程序关闭的时候一定要加上： CefSharp.Cef.Shutdown(); 因为关闭的时候，不将浏览器关闭的话，会阻塞主线程导致报错。修复CefS

分手后的思念是犯贱/ 2022年01月12日 12:35/ 0 赞/ 625 阅读

相关 vue中keepalive的使用

App.vue写2个 router-view 出口 <keep-alive>  <router-v

小灰灰/ 2021年09月09日 05:08/ 0 赞/ 519 阅读

相关 keep-alive的使用注意点

项目中存在组件之间的切换问题，Vue 中有个「动态组件」的概念，它能够让我们更好的实现组件的切换。在实际的项目开发中，产品是不可能放过我们的，需求总是在不停的变化，如果你碰

今天药忘吃喽~/ 2021年08月13日 22:23/ 0 赞/ 377 阅读