vue Keep-alive组件缓存的简单使用代码

目录
  • Props:
  • 用法:
  • 一、基本用法
  • 二、结合Router使用
  • 总结

Props:

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例。

用法:

keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

被包含在 keep-alive 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated。

activated:在 keep-alive 组件激活时调用,该钩子函数在服务器端渲染期间不被调用。

deactivated:在 keep-alive 组件停用时调用,该钩子在服务器端渲染期间不被调用。

使用 keep-alive 会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在 activated 阶段获取数据,承担原来 created 钩子函数中获取数据的任务。

一、基本用法

<template>
 <div>
    <div>
      <button @click="flag='testA'">A组件</button>
      <button @click="flag='testB'">B组件</button>
      <component :is="flag"></component>
    </div>
 </div>
</template>

<script>
import testA from './testA'; 

export default {
  data(){
    return{
      flag:'testA'
    }
  },
  methods:{

  },
  components:{
    testA,
   'testB': () => import('./testB')
  }
}
</script>

keep-alive主要用于保留组件状态或避免重新渲染。比如在动态组件中,为组件A和组件B分别设置了随机数编号,若在切换组件后又显示新的随机数体验极差,因此要用到keep-alive,下面聊聊keep-alive的各种用法。

App.vue:

//第一种:直接在组件外面套keep-alive 组件A和组件B内容都会被缓存
    <keep-alive>
      <component :is="flag"></component>
    </keep-alive>

//第二种:include 此时只有组件A内容会被缓存 若有多个可用逗号分隔include="testA,testB"
      <keep-alive include="testA">
         <component :is="flag"></component>
      </keep-alive>

//第三种:include+正则表达式或者数组 这种情况必须用v-bind (:include="")
      <keep-alive :include="['testA']">
         <component :is="flag"></component>
      </keep-alive> 

//第四种:exclude 此时组件A内容不会被缓存,组件B内容会被缓存
      <keep-alive exclude="testA">
         <component :is="flag"></component>
      </keep-alive> 

//特殊情况:若include和exclude同时出现 exclude的优先级是高于include的此时只缓存组件B
      <keep-alive include="testA,testB" exclude="testA">
         <component :is="flag"></component>
      </keep-alive> 

二、结合Router使用

默认情况下在点击标题几后跳转到别的组件再回到Tab切换组件后仍是展示默认的内容1,此时可以结合router来缓存其内容达到上图的效果。

首先在router中为路由页面添加meta属性

{
    path: '/tab',
    name: 'tab',
    meta:{
      keepAlive:true   //需要缓存
    },
    component: () => import('../views/Tab.vue')
  },
  {
    path: '/banner',
    name: 'banner',
    meta:{
      keepAlive:false   //不需要缓存
    },
    component: () => import('../views/Banner.vue')
  }

然后在App.vue中添加判断:

    //此处是为添加了keepAlive=true 的路由添加缓存
     <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>
     </keep-alive>

    //此处是为添加了keepAlive=false 的路由默认不缓存
      <router-view v-if="!$route.meta.keepAlive"/>   

注:本文演示所用案例来自金渡教育课件

总结

到此这篇关于vue Keep-alive组件缓存简单使用的文章就介绍到这了,更多相关vue Keep-alive组件缓存使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue中keep-alive组件实现多级嵌套路由的缓存

    目录 现状(问题): 探索方案: 实现方式 现状(问题): keep-alive 组件对第三级及以上级的路由页面缓存失效 探索方案: 方案1.直接将路由扁平化配置,都放在一级或二级路由中方案2.再一层缓存组件用来过渡,并将其name配置到include中 实现方式 方案1不需要例子,按规则配置路由就行重点介绍方案2因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通过服务端返回做了统一配置,所以我只能用方案2来实现. 直接看原有代码(问题代码) // src/la

  • vue内置组件keep-alive事件动态缓存实例

    在App.vue文件中配置 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 在路由中配置 { path: '/backstage', component: res

  • vue中keep-alive内置组件缓存的实例代码

    需求: home 组件中有一个 name 的 data 数据.这个数据修改之后,再切换到其他的组件.再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值.希望组件有缓存. keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可. keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子.也就是说不会销毁了. 2. 切换回来时,也不会重新创建.(既然都没有被销毁,哪里来的重新创建呢) 3. 会多出两个生命周期

  • vue里如何主动销毁keep-alive缓存的组件

    问题产生的背景 我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个页面进行缓存,而标签页的切换实际上是路由的切换,也就是说打开一个新标签页的时候,url 会跟着变化,老的标签页如果在 keep-alive 的 include 范围内那就会缓存下来. 然后客服人员就反馈页面开的久了就会崩溃,因为他们基础上不会刷新页面(工作需要),又总有切换标签的习惯,最后导致内存越来越大最后崩溃. 依赖环境 这个项目是基于一个开源 vue

  • vue 使某个组件不被 keep-alive 缓存的方法

    提出问题 最近在做项目发现一个问题,当我使用了 keep-alive 标签后,进入了某个路由进行一系列操作,再点击浏览器后退,再次进入刚才的路由,页面被操作的数据没有初始化! 分析问题 这是因为 keep-alive 将路由页面缓存,所以该路由没有完成整个生命周期,没有 destroyed,因此重新进入也没有触发其他生命周期钩子,如 created 等. 解决问题 (1). 查看官方文档 当组件在 keep-alive 内被切换,它的 activated 和 deactivated 这两个生命周

  • vue中使用keep-alive动态删除已缓存组件方式

    目录 项目场景 问题描述 解决方案 项目场景 在做后台管理系统的时候,有这样一个需求: 后台的界面如下: 点击左边的菜单,会在右边的顶部生成一个个tag导航标签.当打开多个tag页时,用户可以在多个tag之间进行切换.需要在新增,修改页面切换tag时候,保留之前的信息,不进行页面的刷新. 问题描述 经过查询vue文档,可以使用keep-alive实现标签路由缓存,实现方式如下: 在路由配置的meta中添加keepAlive,如下: { path: '/actdebt', component: L

  • vue keep-alive 动态删除组件缓存的例子

    业务需求: 切换tab页标签的时候(路由前进的时候),缓存当前组件数据,关闭tab页标签的时候清除组件缓存. 实现: 1.先在store的state里面设置一个要缓存数组 2.在进到子页面的时候,更新store的数组,把将要缓存组件的name(注意:是组件的name,并不是路由的name),装进数组 3.当前组件的route-view,外层包裹keep-alive,include用你从仓库里面取出来的数组 4.关闭标签页(也就是后退路由的时候),清空store里的数组 总结:通过动态的设置inc

  • vue Keep-alive组件缓存的简单使用代码

    目录 Props: 用法: 一.基本用法 二.结合Router使用 总结 Props: include - 字符串或正则表达式.只有名称匹配的组件会被缓存. exclude - 字符串或正则表达式.任何名称匹配的组件都不会被缓存. max - 数字.最多可以缓存多少组件实例. 用法: keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • Vue验证码60秒倒计时功能简单实例代码

    template <template> <div class='login'> <div class="loginHeader"> <input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" /> <input type="tel" class="codeBtn&q

  • vue使用transition组件动画效果的实例代码

    transition文档地址 定义一个背景弹出层实现淡入淡出效果 <template> <div> <button @click="show = !show"> Toggle </button> <transition name="fadeBg"> <div class="bg" v-if="show">hello</div> </tra

  • Vue实现递归组件的思路与示例代码

    目录 前言 一.递归组件是什么? 二.Vue实现递归的核心思路 三.代码示例 1.父级 2.子级 3.实现效果 补充:递归组件的应用场景 总结 前言 在我们开发过程中,为了提高开发效率,降低开发难度,我们会直接使用组件库来实现,同时也衍生出了很多优秀的组件库,如:饿了么.蚂蚁.Iview.vant等等.但是有时这些组件库提供给我们的组件不满足我们的需求或者定制组件时成本太高,那么我们就要手动实现了. 一.递归组件是什么? 字面理解为层层递进最后归并到一起,它的特点就是层级分明. 例如饿了么组件库

  • vue+swiper实现组件化开发的实例代码

    swiper的组件 <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt="">&l

  • vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)

    目录 一.使用场景 二. 认识下keep-alive 三.在组件中应用 四.解决组件不缓存问题 五.keep-alive配合router使用 总结 一.使用场景 在vue开发过程中(单页面),有一些需求需要我们把页面状态保存下来.在切换页面时,页面不会进行重新加载. 一般情况下,如果不做特殊处理,会重新执行created 和 mounted生命周期,从而重新加载页面,默认就显示到第一页去了,就很烦. (我的问题是,使用keep-alive了,但组件仍然不缓存,下面会解决) 二. 认识下keep-

  • Vue组件BootPage实现简单的分页功能

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介  其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样

  • vue递归组件实战之简单树形控件实例代码

    1.递归组件-简单树形控件预览及问题 在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2.树形控件基本结构及样式 <template> <ul class="vue-tree"> <li class="tree-item"> <div class="tree-content"><!--节点内容--> <div class="expand-

  • vue服务端渲染页面缓存和组件缓存的实例详解

    vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期. }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url ===

随机推荐