vue2.0 keep-alive最佳实践

落日映苍穹つ 2022-06-16 03:59 159阅读 0赞

#### 1.基本用法 ####

vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗

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

有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的  
在使用`keep-alive`的情况下

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

将首次触发请求写在`created`钩子函数中,就能实现缓存,  
比如列表页,去了详情页 回来,还是在原来的页面

#### 2.缓存部分页面或者组件 ####

##### (1)使用router.meta属性 #####

// 这是目前用的比较多的方式
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

`router`设置

... 
     routes: [
        {  path: '/', redirect: '/index',  component: Index, mate: {  keepAlive: true }},
        { 
     path: '/common',
     component: TestParent,
     children: [
            {  path: '/test2', component: Test2, mate: {  keepAlive: true } } 
          ]
        }
        ....
        // 表示index和test2都使用keep-alive

##### (2).使用新增属性inlcude/exclude #####

2.1.0后提供了`include/exclude`两个属性 可以针对性缓存相应的组件

<keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    //其中a,b是组件的name

`注意`:这种方法都是预先知道组件的名称的

##### (2)动态判断 #####

<keep-alive :include="includedComponents">
      <router-view></router-view>
    </keep-alive>

`includedComponents`动态设置即可

发表评论取消回复

表情：

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

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

相关阅读

相关 vue中keepAlive的使用

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

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

相关 Echarts 在 Vue 中的最佳实践

前言相信对于大对数人来说，`ECharts` 这玩意儿都是一个很容易上手的东西，就算你不是开发人员，只要到 [ECahrts 的官网][ECahrts] 上找几个例子看

本是古典何须时尚/ 2023年09月24日 23:07/ 0 赞/ 50 阅读

相关 vue keepalive

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不

男娘i/ 2022年11月01日 10:54/ 0 赞/ 206 阅读

相关最佳实践

28.2 性能 28.2.1 作用域意识第 4 章讨论过 JavaScript 作用域的概念，以及作用域链的工作原理。随着作用域链中作用域数量的增加，访问当前

小鱼儿/ 2022年10月30日 02:29/ 0 赞/ 344 阅读

相关 Vue.js 最佳实践

转载自：[前端大全][Link 1] > 作者：zach5078 > segmentfault.com/a/1190000014085613 本文面向对象是有一定 Vu

柔情只为你懂/ 2022年08月30日 14:53/ 0 赞/ 176 阅读

相关 vue2.0 keep-alive最佳实践

1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep-alive> <compon

落日映苍穹つ/ 2022年06月16日 03:59/ 0 赞/ 160 阅读

相关 20多个MySQL最佳实践与优化

本文地址：https://code.tutsplus.com/tutorials/top-20-mysql-best-practices--net-7855 数据库操作往往是

蔚落/ 2022年06月01日 13:29/ 0 赞/ 228 阅读

相关 golang tcp keepalive实践

[前文][Link 1]中已经介绍了TCP keep alive的做了详尽说明，本文结合golang，介绍如何使用TCP keep alive。目前golang net包不

- 日理万妓/ 2022年01月27日 13:23/ 0 赞/ 279 阅读

相关 20个数据库设计最佳实践

转帖地址：http://blog.csdn.net/zhujiaxing666666/article/details/9227433 下面这些内容，是经过借鉴和这些年来对数据

妖狐艹你老母/ 2022年01月13日 13:07/ 0 赞/ 301 阅读

相关 vue中keepalive的使用

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

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