微客导航 » 文章资讯 » vue中keep-alive内置组件缓存的实例代码

vue中keep-alive内置组件缓存的实例代码

2023-07-27 03:30:14 164

需求：
home组件中有一个name的data数据。这个数据修改之后，再切换到其他的组件。再切换到home组件，希望home中name这个值是之前修改过的值。希望组件有缓存。
keep-alive的使用方式：
将要缓存的组件使用keep-alive包裹住即可。
keep-alive优点的介绍：
1.切换组件时，当前组件不会触发销毁的生命周期钩子。也就是说不会销毁了。
2.切换回来时，也不会重新创建。（既然都没有被销毁，哪里来的重新创建呢）
3.会多出两个生命周期的钩子函数
a.activated缓存激活第一次会触发、组件能被看到
一般根created做一样的事情：请求数据
b.deactivated缓存失活组件不能被看到
一般根beforeDestroy做一样的事情:清除定时器、移除全局事件监听
4.可以在vuedevtools上看见组件的缓存情况
**keep-alive的更多属性设置**
1.include包含
a.include=“组件1,组件2”注意逗号前后不要有空格
b.:include="[组件1,组件2]"
c.:include="/^hello/"
2.exclude排除
a.exclude=“组件1,组件2”注意逗号前后不要有空格
b.:exclude="[组件1,组件2]"
c.:exclude="/^hello/"
3.max规定最大能缓存组件的数量，默认是没有限制的\
假定缓存队列是[home,list]
现在进入about的时候about也会被缓存上，这时会将之前的第一个给排出去[home,list,about]=>[list,about]先进先出原则。

概念就这些上代码

1.vue链接：https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js
2.创建组件。(三个组件)

//组件一
Vue.component("home",{
data(){
return{
name:"张三",
};
},

template:`

home
{{name}}
修改name为李四

`,
//实例创建完成的时候打印
created(){
console.log("homecreated");
},
//实例销毁前的打印
beforeDestroy(){
console.log("homebeforeDestroy");
},
//激活缓存的时候打印组件能被看到
activated(){
console.log("homeactivated");
},
//缓存失活时打印组件不能被看到
deactivated(){
console.log("homedeactivated");
},
});
//组件二
Vue.component("list",{
template:`

list

`,
		//激活缓存的时候打印组件能被看到
created(){
console.log("listcreated");
},
		//缓存失活时打印组件不能被看到
beforeDestroy(){
console.log("listbeforeDestroy");
},
});
	//组件三
		Vue.component("about",{
template:`

about

`,
		//激活缓存的时候打印组件能被看到
created(){
console.log("aboutcreated");
},
		//缓存失活时打印组件不能被看到
beforeDestroy(){
console.log("aboutbeforeDestroy");
},
});

3.创建实例。

Vue.component("home",{
data(){
return{
name:"张三",
};
},

body部分


//active是样式来做高亮用v-bind来绑定
//@click自定义事件将实例里的数据改为home
//点击的时候会触发component内置标签更换为home

home


list




//用keep-alive内置组件包裹componet内置组件v-bind绑定max作用是最多缓存两个



//方法二
//排除法排除了about只有home与list可以缓存
//
//
//
//方法三
//选择缓存法只有home与list可以被缓存
//keep-aliveinclude="home,list">
//
//

三种方法的具体用法在文章的开始的时候有介绍

总结

到此这篇关于vue中keep-alive内置组件缓存的实例代码的文章就介绍到这了,更多相关vuekeep-alive内置组件缓存内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

vue中keep-alive内置组件缓存的实例代码

home

list

about

热门推荐

随机推荐