vue使用keep-alive缓存组件,vue keep alive 动态清除
说到Vue缓存，首先要选择官方的缓存方案keep-alive。本文主要介绍了Vue及时清理keepalive缓存方案的详细解决方案，通过示例代码进行了非常详细的介绍，对大家的学习或者工作有一定的参考价值。有需要的朋友可以和边肖一起学习。
目录
尝试思考需求。1.手动操作保活组件的缓存阵列。2.排除要演示的解决方案。
需求
在单页应用程序中，用户在进入表单填写页面时需要初始化表单的内容。在填充过程中，可能会涉及到地图选择或列表选择等操作，因此需要选择一个新页面并回调显示。
这时，我们需要缓存表单填写的页面实例。当我们退出表单填写或者提交表单内容时，需要销毁当前的表单实例，下次再重新初始化。
思考
说到Vue缓存，首先要选择官方缓存方案keep-alive的内置组件来实现。
Keep-alive组件为我们提供了缓存组件的能力，可以完整的保存组件的当前状态，这对我们帮助很大。
然而，在实际的业务场景中，我们经常按需缓存页面，就像在App开发中一样。每个页面都是一个单独的页面实例。由于Vue路由器的限制，每个页面都有一个固定的路径，所以每次访问这个路径都会碰到同一个组件实例。
这时，有些朋友可能会说
诶，激活不能用于页面更新或者处理吗？
是的，可以。但是有些操作需要在mounted中完成，有些需要在activated中更新，代码还要处理很多进入页面的操作，非常麻烦。
此时就有两个思考方向：
必要时清除缓存页面的实例。每次推送页面时，确保当前页面是一个全新的实例对象。第二种方案，和App页面栈一样，物理上可以解决需求中的问题，但是需要做的改动很多。比如在Vue路由器中切换路由时，是否使用动态生成路径来保证当前页面实例不唯一，而且，要自己做好页面栈管理，类似于iOS中的UINavigationController，以便及时清理栈中缓存的页面实例。
因为变化比较大，需要大量测试，所以最终选择方案一方向探索尝试。
尝试
1. 手动操作 keep-alive 组件的 cache 数组
//Vue 2保活部分源代码片段
const { cache，keys }=this
常量键：字符串=
vnode.key==null
？//同一个构造函数可能被注册为不同的本地组件
//所以只有cid是不够的(#3269)
组件选项。Ctor.cid (componentOptions.tag？`:${componentOptions.tag} `: )
:vnode.key
if(缓存[键]) {
vnode . component instance=cache[key]。componentInstance
//使当前密钥最新
取出(钥匙，钥匙)；
keys.push(按键)；
}否则{
//延迟设置缓存，直到更新
this.vnodeToCache=vnode
this.keyToCache=key
}
在特定情况下，使用路由守卫删除缓存数组中的页面实例，同时销毁当前实例。
removeKeepAliveCacheForVueInstance(vueInstance){
字母键=
vueInstance。$vnode.key？
vueInstance。$ vnode . component options . ctor . cid(vue instance。$vnode.componentOptions.tag？`:${vueInstance。$ vnode . component options . tag } `: )；
让cache=vueInstance。$ vnode . parent . component instance . cache；
让keys=vueInstance。$ vnode . parent . component instance . keys；
if(缓存[键]) {
vueInstance。$ destroy()；
删除缓存[键]；
let index=keys . index of(key)；
if (index -1) {
keys.splice(索引，1)；
}
}
}
这个方案比较繁琐，但是因为是直接操作缓存数组，所以可能会造成一些意想不到的泄漏问题或者运行问题，虽然我自己试的时候没有发现。
在Vue 3中，我也尝试寻找对应的缓存数组，确实找到了。但是Vue 3源代码中缓存数组的操作权限仅限于开发环境。
//Vue 3 KeepAlive组件片段
if(_ _ DEV _ _ _ _ FEATURE _ PROD _ DEV tools _ _){
；(任何实例)。__v_cache=缓存
}
部署生产环境后，无法通过实例获取缓存阵列。__v_cache，所以这个方案在Vue 3中无法进行。
结果有了第二次尝试。
2. exclude 大法好
在联系keep-alive之前，所有的注意力都放在include属性上。其实exclude属性同样重要，效果和直接删除缓存数组差不多。
//Vue 3 KeepAlive组件片段
如果(
(包括(！名字！匹配项(包括，名称)))
(排除名称匹配(排除，名称))
) {
电流=vnode
返回rawVNode
}
如果exclude中有一个值，那么将返回当前的新实例，而不是从缓存中获取。并且exclude的优先级高于include。
这样，我们可以通过操作exclude的内容来控制缓存页面。
而且Vue 3中exclude的控制更加方便。您只需要定义一个全局排除响应变量，就可以在任何地方操作。具体的清算方式取决于业务流程。
export const excludes=ref string[]([])；
//需要删除的时候
导出函数removeKeepAliveCache(名称：字符串){
excludes.value.push(名称)；
}
//当需要恢复缓存时
导出函数resetKeepAliveCache(名称：字符串){
excludes . value=excludes . value . filter((item)=item！==姓名)；
}
Demo
下面是一个演示高速缓存清除效果的小演示：
https://ztstory.github.io/vue-composition-demo/#/
流程：
索引和输入是缓存页面。
返回索引时清除输入缓存，并重新进入输入页面以激活缓存。
演示源代码地址：https://github.com/ZTStory/vue-composition-demo
关于Vue及时清理keepalive缓存的详细说明，本文到此结束。关于Vue清理keepalive缓存的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。