vue使用keep-alive缓存组件,vue keep-alive作用
本文主要介绍vue自定义keepalive组件的相关信息。keep-alive组件使用这两个属性includeexclude来传入组件名，以确认哪些可以被缓存。这篇文章给你做了非常详细的介绍，对你的学习或者工作有一定的参考价值。请有需要的朋友参考。
目录
vue自定义keepalive组件为什么会出现这种情况？如何解决这个问题？问题已知如何解决？想法是“如何使用代码”。就是这样，另一个的全部意义。
vue自定义keepalive组件
前阵子在vue项目中有一个实现多标签页功能的新需求。我本来想，这不是单纯的增加按钮重定向吗？当然，如果这么简单，我也不会写这篇文章。赶紧写出来，提交测试。测试兄弟很快提交了一个问题：“为什么你的两个标签页访问同一个链接，但它仍然是链接的？”。妈的，这绝对是缓存问题。
为什么会出现这种情况呢
Keep-alive组件使用这两个属性(包括exclude)来传入组件名，以确认哪些组件可以被缓存。
保持活动排除=a，b，c
路由器视图/路由器视图
/保持活力
我们来看看源代码，看看大家是怎么实现的(这两张图真难看)
主要逻辑(直接说上面的代码)是根据传入的include、exclude两个属性传入数组，根据当前访问的组件名称进行判断。对于同一个链接，我们都使用相同的名称访问同一个组件。当我们第二次访问它时，链接指向同一个组件。因为组件名作为缓存键，所以会被认为是缓存读取操作，然后直接加载渲染缓存。因此，两个选项卡页面访问同一个链接，从而产生链接。
如何解决这个问题呢
这个比较简单，因为之前组件名是键，所以我们不用组件名作为键，而是用name页签的索引作为键。
问题知道了怎么解决呢
思路有了撸代码
group-keep-alive.js
函数remove(arr，item) {
if(数组长度){
var index=arr.indexOf(item)
if (index -1) {
返回排列拼接(索引，1)
}
}
}
函数getFirstComponentChild(children){
if (Array.isArray(children)) {
for(var I=0；I .儿童.长度；i ) {
var c=儿童[i]
if(isDef(c)(isDef(c . component options) isAsyncPlaceholder(c))){
返回c
}
}
}
}
函数isDef(v) {
回v！==未定义的v！==空
}
函数isAsyncPlaceholder(节点){
return node . is comment node . async factory
}
var pattern types=[字符串，正则表达式，数组]
导出默认值{
名称：保持活动，
摘要：真的，
计算值：{
//这是伪代码。
//缓存数组[{ tab1/component name: comp， tab2/component name: comp }，{ tab1/component name: comp， tab2/component name: comp }]
cacheArray() {
归还这个。$store.state.xxx.groupCache
},
//当前选择的分组示例：0/1/2.这里用来读取缓存数组的索引。
groupIndex() {
归还这个。$store.state.xxx.groupIndex
}
},
已创建：函数已创建(){
//当前选项卡的缓存
const cache=this . cache array[this . group index]
this . cache=cache object . create(null)
//TODO页面初始化事件，以后可以触发。
},
已销毁：函数已销毁(to，form) {
//TODO页面离开事件，稍后可以触发关闭事件。
},
render:函数render() {
var slot=this。$slots.default
var vnode=getFirstComponentChild(slot)
var component options=vnode vnode . component options
//检查模式
var ref$1=this
var cache=ref$1.cache
const key=` $ { this . group index }/$ { component options。Ctor.options.name} `
//有一个键直接读取
if(缓存[键]) {
vnode . component instance=cache[key]。件实例
}否则{
//没有缓存。
cache[key]=vnode
}
//写入缓存
这个。$store.dispatch(setGroupCache ，{
缓存：this.cache
})
返回vnode (slot slot[0])
}
}
如何使用
就说一次。
群组-保持活动
路由器视图：key=key /
/group-保持活动状态
//必须区分键
计算值：{
key() {
返回“{选择索引}/{完整路径}”
},
}
主题说完了，整点其他的
1.摘要：在group-keep-alive组件中设置true，当前组件设置为抽象组件。我姐李：就是提前拦截下一关(包括子元素)事件，以便操作下一关。
2.路由器视图：key=key 。这个键的作用是区分同一个组件是否重复使用一个实例。
这就是这篇关于vue自定义keepalive组件的文章。有关vue keepalive组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。