Vue中keep-alive的两种应用方式

作者:小羽羽 时间:2024-05-09 15:10:53 

Vue中keep-alive的使用我总结的有两种方式应用:

首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件。当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化。现在有需求切换回来不销毁组件,保持原来的状态,此时用keep-alive就可以实现了

我创建了两个组件,可以相互切换

组件1:

Vue中keep-alive的两种应用方式

Vue中keep-alive的两种应用方式

组件2:

Vue中keep-alive的两种应用方式

Vue中keep-alive的两种应用方式

第一种方式

在组件1的路由中添加 meta: { keepAlive: true }, 也就是当前路由需要缓存

Vue中keep-alive的两种应用方式

此时路由设置完毕,keep-alive代码可以结合v-if进行包裹,如果meta中的keepAlive为true进行缓存,否侧不进行缓存,这样可以更灵活一些。

Vue中keep-alive的两种应用方式

此时组件被缓存,不会销毁,所以切换不会重新创建,自然也不会调用create等生命周期函数。不过我们可以用activated与deactivated来获取当前组件是否处于活动状态(类似钩子函数的用法)。

第二种方式

在keep-alive上有两个属性:

Vue中keep-alive的两种应用方式

通过include设置

Vue中keep-alive的两种应用方式

此时,也可以达到缓存keepAlive组件的目的。

以上是我初步总结的keep-alive的实现用法,不正之处烦请诸位指正。

来源:https://www.cnblogs.com/dingxingxing/p/11981123.html

标签:vue,keep-alive,应用
0
投稿

猜你喜欢

  • javascript自执行函数之伪命名空间封装法

    2023-08-12 20:30:09
  • python导入时小括号大作用

    2021-09-07 19:11:09
  • 使用python 进行区间取值的方法

    2023-12-17 01:27:56
  • python如何生成任意n阶的三对角矩阵

    2021-09-18 07:41:37
  • 用Dreamweaver MX巧妙格式化表格

    2008-03-18 16:39:00
  • asp_数据库操作封装

    2010-04-03 21:00:00
  • python3.x上post发送json数据

    2021-07-03 02:07:23
  • python正则表达式之re.match()与re.search()的用法及区别

    2022-05-14 13:21:46
  • 对vue2.0中.vue文件页面跳转之.$router.push的用法详解

    2024-04-30 10:35:03
  • python多进程中的内存复制(实例讲解)

    2022-01-20 23:34:46
  • python获取磁盘号下盘符步骤详解

    2022-10-05 08:32:32
  • golang elasticsearch Client的使用详解

    2024-05-28 15:24:41
  • python爬虫框架talonspider简单介绍

    2021-05-14 06:27:01
  • Microsoft SQL Server 2012 数据库安装图解教程

    2024-01-13 18:20:25
  • RSA实现JS前端加密与PHP后端解密功能示例

    2023-08-18 23:52:07
  • Python去除PDF水印的实现示例

    2022-08-13 19:26:45
  • Python常用标准库详解(pickle序列化和JSON序列化)

    2022-04-08 12:50:56
  • Echarts实现单条折线可拖拽效果

    2024-04-10 13:59:17
  • django 使用内置messages的操作

    2023-04-23 13:35:56
  • Python中getpass模块无回显输入源码解析

    2022-05-02 03:58:28
  • asp之家 网络编程 m.aspxhome.com