vue组件缓存方式,vue清缓存命令
有时，如果我们不希望请求的数据再次被刷新，我们需要使用数据缓存。本文主要介绍如何熟练使用Vue缓存功能的相关信息，有需要的可以参考一下。
目录
vue2缓存功能改造vue缓存功能优化总结
vue2中的缓存函数
vue2版本有这样的缓存功能。
/**
*创建纯函数的缓存版本。
*/
函数缓存(fn) {
var cache=object . create(null)；
return(函数cachedFn (str) {
var hit=cache[str]；
return hit (cache[str]=fn(str))
})
}
上述函数中有一个常见的场景，比如存在一个数组，其中每个元素的首字母都需要大写。
常量数组=[abc ， ed ， abc ， acd ， ed ， fkg ，];
的常见解决方案
//设置一个大写函数
函数大写(字符串){
返回str.charAt(0)。toUpperCase() str.slice(1)
};
const capitalizeArray=array.map(大写)；
仔细观察，我们会发现array中有很多重复的元素，它们返回的结果是一样的。其实执行资本化是不需要重复计算的，资本化是一个纯函数。这时候我们可以利用上面缓存的来做一个备忘录功能。
转换如下所示
函数大写(字符串){
返回str.charAt(0)。toUpperCase() str.slice(1)
};
const capitalize array=array . map(cached(capital))；
当遇到重复的字符串时，将直接返回缓存的结果。把资本化当成一个非常耗时的任务，性能优化不止一点点。
改造vue缓存函数
上面的例子是缓存同步任务的纯功能。业务拓展中有这样一个场景，输入框搜索。当输入框触发输入事件时，我们都调用接口返回查询结果。比如我输入掘金关键词返回结果，然后输入掘金NBA返回结果。这个时候我删了NBA，查询了掘金。其实我们之前查过这个结果。如果缓存的话，可以直接拉缓存，不需要再调用接口了。
我们实现了一个基于缓存的异步纯函数的备忘录。
const cachedAsync=function(fn) {
const cache=object . create(null)；
return异步字符串={
const hit=cache[str]；
如果(点击){
回击；
}
//只缓存成功的承诺，如果失败直接再次请求。
return(cache[str]=await fn(str))；
};
};
使用场景
const cachedasyncqueryprlist=cachedAsync(prdNo={
//以下是请求的操作，它返回一个承诺
返回queryPrdList({
prdNo
});
});
模板
El-input v-model= prdno placeholder=请输入产品代码 @input=handleQueryPrdList/
El-选择
El-option v-for= item in prd list :label= item . label :value= item . value
/el-select
/模板
脚本
导出默认值{
data() {
prdNo: ，
prdList: []，
},
方法：{
异步handleQueryPrdList() {
const { data }=await cachedAsyncQueryPrdList(this . prdno)；
this . prd list=data；
}
}
}
/脚本
以上实现了。当输入相同的关键字时，如果之前的请求成功，会直接拉起缓存，不会重新向服务器发起请求。因为我们的备忘录只会缓存成功的承诺。
优化
对于上面的场景，虽然el-input的底层已经使用了compositionEnd和compositionStart事件做了一层防抖，但是只有在屏幕上实际输入文本时才会触发输入事件。然而，这还不够。如果用户输入速度非常快，一秒钟内会发送几次请求，这会增加服务器的负担。所以这个通常配合防抖功能使用。
功能防抖
常数去抖=(fn，ms=300)={
让timeoutId
返回函数(.args) {
clear time out(time out id)；
time outid=setTimeout(()=fn . apply(this，args)，ms)；
};
};
然后与我们的cachedAsync一起使用。
const cachedasyncqueryprlist=cachedAsync(prdNo={
//下面是一个创建交互式、快速动态网页应用的网页开发技术请求的操作，返回一个承诺
返回queryPrdList({
prdNo
});
});
模板
埃尔-输入垂直模型=prdNo placeholder=请输入产品编码@ input= debounceQueryPrdListFn /
埃尔-选择
El选项v-for= prd列表中的项目:label= item。“label”:value=“item。“价值”
/el-select
/模板
脚本
const noop=()={ }；
导出默认值{
data() {
prdNo: ，
prdList: []，
debounceQueryPrdListFn: noop，
},
已创建(){
这个。debouncequeryprdlistfn=de bounce(这个。handlequeryprdlist)；
},
方法：{
异步handleQueryPrdList() {
const { data }=await cachedAsyncQueryPrdList(this。prdno)；
这个。prd列表=数据；
}
}
}
/脚本
联邦调查局警告：cachedAsync函数，只适用于纯的函数。
这个实现已经在生产环境稳定使用，大家可以放心食用。
总结
到此这篇关于如何巧用某视频剪辑软件缓存函数的文章就介绍到这了，更多相关巧用某视频剪辑软件缓存函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。