关于Vue中keep-alive的作用及使用方法

更新时间：2023年04月23日 10:55:06 作者：前端-阿辉

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，该组件将不会销毁，这篇文章主要介绍了关于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以参考下

一、概念：

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，该组件将不会销毁。

二、作用：

用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。

三、属性

include:字符串或正则表达式。只有匹配的组件会被缓存。
exclude:字符串或正则表达式。任何匹配的组件都不会被缓存。

四、使用场景

比如：有一个列表页面和一个详情页面，那么用户可能会经常执行打开详情 => 返回列表 => 打开详情，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染页面，从而节省内存开销。

五、使用方式:

5.1. 在App.vue中使用keep-alive组件，来缓存所有页面

  <div id="app">
  	<keep-alive>
	    <header-bar></header-bar>
	    <div class="container">
	      <menu></menu>
	      <Main />
	    </div>
	    <footer-bar></footer-bar>
    </keep-alive>
  </div>

5.2. 按条件缓存，使用include，exclude判断是否缓存

5.2.1. 将缓存 name 为 keep的组件，如果有多个，可用逗号分

<keep-alive include='keep'>
  <router-view/>
</keep-alive>

5.2.2. 将不缓存 name 为 nokeep的组件

<keep-alive exclude='nokeep'>
  <router-view/>
</keep-alive>

5.2.3. 还可使用属性绑定动态判断

<keep-alive :include='includedFun'>
  <router-view/>
</keep-alive>

5.3. 在router目录下的index.js中，

5.3.1. 使用meta: { keepAlive = true }, 表示需要缓存

 const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path:'/ login',
    component: Login
  },
   {
      path: '/list',
      component: List,
      meta: {
          isKeep: true
      }
   },
  {
      path: '/detail',
      component: Detail,
      meta:{
          isKeep: true
      }
  }
]

5.3.2. 在App.vue中进行判断

<div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.isKeep"></router-view>
    </keep-alive>
    <router-view></router-view>
  </div>

到此这篇关于关于Vue中keep-alive的作用是什么？怎么使用？的文章就介绍到这了,更多相关Vue中keep-alive使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue实现组件跟随鼠标位置弹出效果(示例代码)
这篇文章主要介绍了vue中实现组件跟随鼠标位置弹出效果,本文通过图文示例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-02-02
Vue3中setup方法的用法详解
在vue3版本中，引入了一个新的函数，叫做setup。这篇文章将为大家详细介绍一下Vue3中setup方法的用法，感兴趣小伙伴的可以了解一下
2022-07-07
Vxe-Table开发中的各种坑以及避坑指南
vxe-table是一个全功能的Vue表格,满足绝大部分对Table的一切需求,与任意组件库完美兼容,下面这篇文章主要给大家介绍了关于Vxe-Table开发中各种坑以及避坑的相关资料,需要的朋友可以参考下
2022-09-09
VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情
这篇文章主要介绍了VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
Vue实现渲染数据后控制滚动条位置(推荐)
这篇文章主要介绍了Vue实现渲染数据后控制滚动条位置，本文通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
el-upload大文件切片上传实现示例详解
这篇文章主要为大家介绍了el-upload大文件切片上传实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
详解vue-loader在项目中是如何配置的
这篇文章主要介绍了详解vue-loader在项目中是如何配置的，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
vue-element-admin开发教程(v4.0.0之前)
本文主要介绍了vue-element-admin开发教程(v4.0.0之前)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
Vuex中状态管理器的使用详解
这篇文章主要介绍了Vuex状态管理器的使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
一篇文章让你看懂封装Axios
axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护,这篇文章主要给大家介绍了关于封装Axios的相关资料,需要的朋友可以参考下
2022-01-01