一分钟搞懂keep-alive_keep-alive组件只能包裹动态组件吗-程序员宅基地

技术标签：前端 vue.js javascript

文章目录

一、keep-alive是什么？
二、具体使用
三、使用keep-alive的好处
四、延伸

一、keep-alive是什么？

keep-alive是Vue的内置组件，使用它包裹动态组件时，会缓存不活动的动态组件实例，而不是销毁他们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

二、具体使用

kepp-alive不但可以包裹缓存动态组件，还可以包裹缓存页面内容。

1.包裹缓存动态组件

如下图，我新建了3个组件，并把它渲染到页面上：

在这里插入图片描述

页面效果如下：

当我点击Live1,Live2,Live3时，三个组件之间会来回切换，并且显示的num值也会重新归零。
页面效果如下：

如果我们想在切换的时候，还保留组件的信息，这时就需要用到keep-alive。

下面我们再看效果。
在这里插入图片描述
这就实现了缓存不活动的组件实例。

我们再实际应用中，并不是需要缓存全部的组件，这时就需要用到keep-alive的白名单，黑名单，也就是keep-alive的include和exclude属性。
在这里插入图片描述
被加入黑名单的组件，就不会被缓存，相反的，被加入白名单的组件，就会被缓存。

2.包裹缓存页面

keep-alive同样也能包裹缓存页面，在实际开发中，如我们现在开发了一个商品商城项目，首页的数据是不是经常不变的，这时就可以用keep-alive将首页包裹，减少加载时间及性能消耗，提高用户体验性。
使用方法基本与包裹动态组件相同。使用时只需将其包裹在页面路由外，同样也可以利用白名单和黑名单决定哪些需要被缓存，哪些不需要被缓存。

在这里插入图片描述

注意：

使用时在data同级的位置加上name:’’。
在这里插入图片描述

三、使用keep-alive的好处

在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

四、延伸

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用）与 deactivated（组价离开时调用）

本文链接：https://blog.csdn.net/z12845464/article/details/122210704

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

KGCN---pytorch代码（2）---aggregator_kgcn代码实现-程序员宅基地

文章浏览阅读334次，点赞4次，收藏7次。将当前节点的向量（self_vectors）与邻居节点的向量（neighbor_vectors）+邻居关系（neighbor_relations）+以及用户嵌入（user_embeddings）+act（激活函数）结合。在得分张量的最后添加一个维度，将其形状从 [batch_size, -1, n_neighbor] 调整为 [batch_size, -1, n_neighbor, 1]结果是一个形状为 [batch_size, -1, n_neighbor] 的张量，表示每个邻居对当前节点的重要性得分。_kgcn代码实现

C++音频单声道、双声道之间的转换_双声道转单声道 c++-程序员宅基地

文章浏览阅读9.8k次，点赞10次，收藏19次。**本篇文件介绍音频PCM数据的单声道、双声道之间的转换。 PCM数据格式是平面型和非平面型。一般情况下使用的都是非平面，结构都是左右左右左右。**下面介绍函数参数：一、MonoToStereo函数。单声道转双声道参数1：资源buffer(双声道数据) 参数2：资源buffer大小(双声道数据大小) 参数2：转换后buffer(单声道数据) 代码_双声道转单声道 c++

人工智能与智慧城市的教育改革：新的学习体验-程序员宅基地

文章浏览阅读332次，点赞10次，收藏5次。1.背景介绍人工智能(Artificial Intelligence, AI)和智慧城市(Smart City)是当今世界最热门的话题之一。随着科技的发展，这两个领域在教育领域中也开始产生影响。本文将探讨人工智能与智慧城市如何改变教育，为我们提供了一种全新的学习体验。1.1 人工智能与教育的关系人工智能是一种计算机科学的分支，旨在创建智能体，即能够理解、学习和应对复杂任务的计算机程序。...

Froont！在线可视化响应式网页设计工具-程序员宅基地

文章浏览阅读1.4k次。Home / 热门下载 /神器下载 / 正文更多44今天要推荐的神器来自http://froont.com/ ，猜猜它有神马强悍的功能呢？是滴，进入网站后，你就会看到他说：“原来还可以在浏览器里设计网页，仅仅只需要拖放即可！”Froont是一个允许设计师在线设计响应式网页的工具，不需要程序员介入的设计编程工具，为设计师们提供了可视化

15：jquery正则表达式_jqzfz-程序员宅基地

文章浏览阅读167次。1：常见的字符介绍1：\ 转义字符 \n 匹配的就是换行 \ 匹配的是\ ( 匹配的是(。2 ：^ 代表的是开始符号匹配字符的开始或者正则表达式的开始。3： $ 代表的是结束符号匹配字符的结束或者正则表达式的结束。4：* 代表的是匹配前面的字表达式零次或多次 zooo zo* 等价于 {0,}。5： + 代表的是匹配前面的字表达式一次..._jqzfz

android 动态加载 view,Android_Android动态添加View的问题解决方法，后台代码复制代码代码如下:&n - phpStudy...-程序员宅基地

文章浏览阅读97次。Android动态添加View的问题解决方法后台代码private void ChangeView(){ly.removeAllViews();LayoutInflater inflater = (LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE);View layout = inflater.inflate(R.layout.grid..._android addview 源码