keepalive做组件缓存,keep-alive include动态缓存

　　在vue项目中经常使用Keepalive作为缓存，可以说是非常方便的满足了基本需求。但是根据不同的条件缓存或者不缓存同一个页面就有些麻烦了。本文主要介绍如何用Keepalive清除缓存的相关信息，有需要的朋友可以参考一下。

开篇场景

　　我的项目前后没有分离。技术栈是LaYui vue jq，vue是我后来介绍的。为了实现更好的组件化，页面会组件化，减少代码重复。因为jq的页面需要频繁获取dom元素，页面非常冗余，JQ的页面不容易组件化，所以我引入了Vue。最近需要实现一个需求，就是多页缓存。

　　这是我举的一个简单的例子。

　　一开始我的想法是设计一个数组，每次点击时把点击的组件推送到一个数组，然后通过v-for用自定义组件遍历；

　　当你点击时，你将添加所有的内容。这时候你需要一个索引来显示当前的高亮，要求是一次只能显示一页。这时候你就要通过索引隐藏其他页面了。

　　v-for有问题。当它被删除时，由于数组的改变，它将被重新渲染。

　　此时，您可以看到这个功能已经实现，但每次单击时，您都会添加许多相同的元素。此时，我们可以执行重复数据消除操作。

　　多页功能通过重复数据删除简单实现。

　　因为我的功能是实现多页缓存，也就是缓存所有这些页面，所以我使用了keep-alive组件，但是当数组发生变化时，页面会重新渲染。

　　我在操作B页的时候，关闭了A页，也就是删除了，然后重新渲染B页，没能达到想要的缓存效果。所以不能直接用v-for直接渲染。

　　后来想到自己实现一个自定义指令来判断是否重新渲染，但是自定义指令根本没有这个，而且如果得不到实例，就无法得到vnode，所以自己无法实现缓存。

　　后来想用jsx语法写一个组件自己渲染，判断是缓存还是重新创建实例，但是无法拿到缓存渲染。

　　然后我想到了keep-alive组件，直接渲染当前高亮显示的页面，不需要循环。

　　这时候就可以实现缓存的功能了。自己实现一个keep-alive还是很麻烦的。自带的keep-alive还是很好用的，缓存还是很强大的。

　　后来发现一个问题。在我关闭页面后，当我重新打开它时，页面仍然有数据。我只能说keep-alive的缓存太强大了。之后，我想知道如何清除这个缓存。官网有两个API，包含和排除。include是包含那些组件的名称，exclude则正好相反。如果包含那些组件，就不会被缓存，但是我的页面组件是之前的。

　　我试着添加名字，但它不起作用。我检查了如何清除度娘上的缓存。

　　参考文章：https://www.jb51.net/article/219189.htm

　　我想如果我能删除它，我也清除了它的缓存。

　　找了半天，找到了cache。

　　我写的这个简单的例子是在$ children [0]里。$ options.parent.cache，我的真实项目_ vnode . chind ren . component instance中的第一个元素。

　　最重要的是这个带keep-alive的如果你找到这个东西的时候能找到缓存。之前试过写jsx，但是好像找不到缓存。估计没有keep-alive就没有缓存，所以自己实现一个keep-alive还是很难的。

　　找到缓存，您可以看到其中的键名与我们组件的名称相关。可以使用indexOf进行匹配，然后删除缓存。

　　可以看到函数已经实现了，所以可以实现多页缓存。

　　不得不说vue还是很厉害的，keep-alive还是很厉害的。

　　关于如何通过keep-alive清除缓存的这篇文章到此结束。有关keep-alive清除缓存的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。