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

 更新时间:2022年09月21日 11:03:15   作者:Beannnnnnn  
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,下面这篇文章主要给大家介绍了关于vue Keep-alive组件缓存的简单使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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组件缓存使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue watch监听对象及对应值的变化详解

    vue watch监听对象及对应值的变化详解

    下面小编就为大家分享一篇vue watch监听对象及对应值的变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue Router(v3.x) 路由传参的三种方式场景分析

    vue Router(v3.x) 路由传参的三种方式场景分析

    vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式,感兴趣的朋友跟随小编一起看看吧
    2023-07-07
  • Vue Element 分组+多选+可搜索Select选择器实现示例

    Vue Element 分组+多选+可搜索Select选择器实现示例

    这篇文章主要介绍了Vue Element 分组+多选+可搜索Select选择器实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue实现微信获取用户信息的方法

    vue实现微信获取用户信息的方法

    这篇文章主要介绍了vue实现微信获取用户信息的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vscode使用Eslint+Prettier格式化代码的详细操作

    vscode使用Eslint+Prettier格式化代码的详细操作

    这篇文章主要介绍了vscode使用Eslint+Prettier格式化代码,本文通过图文示例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • Vue.js监听select2的值改变进行查询方式

    Vue.js监听select2的值改变进行查询方式

    这篇文章主要介绍了Vue.js监听select2的值改变进行查询方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue 实现可视化拖拽页面编辑器

    Vue 实现可视化拖拽页面编辑器

    这篇文章主要介绍了Vue 实现可视化拖拽页面编辑器的方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2021-02-02
  • vue:el-input输入时限制输入的类型操作

    vue:el-input输入时限制输入的类型操作

    这篇文章主要介绍了vue:el-input输入时限制输入的类型操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue项目中引入ESLint校验代码避免代码错误

    Vue项目中引入ESLint校验代码避免代码错误

    这篇文章主要为大家介绍了Vue项目中引入ESLint插件校验代码避免代码错误的使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue项目前端部署详细步骤(nginx方式)

    Vue项目前端部署详细步骤(nginx方式)

    Nginx(engine x)是一个高性能的HTTP和反向代理web服务器,是部署前端项目的首选,这篇文章主要给大家介绍了关于Vue项目前端部署(nginx方式)的相关资料,需要的朋友可以参考下
    2023-09-09

最新评论