一.什么是keep-alive动态组件。
当组件需要进行频繁的切换的时候这个时候就需要用到动态组件了,动态组件的几个属性,<component :is="要动态绑定的组件"></component>,这个是Vue官方提供的api, 频发的切换组件,会消耗大量的性能,这时候就可以使用<keep-alive> </keep-alive>,来解决这个问题。
二.组件缓存
1.keep-alive定义:
<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁他们
<keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中。当组件
在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行
2.keep-alive的生命周期
1.activated
在keep-alive组件激活时调用。
2.deactivated
在keep-alive组件停用时调用。
被包含在keep-alive中创建的组件,会多出两个生命周期的钩子:activated和deactivated
使用keep-alive会将数据保留在内存中。
3.keep-alive使用方法
include-字符串或数组,正则表达式。只有名称匹配的组件会被缓存------>include的值为组件的name
exclude--字符串或正则表达式。任何名称匹配的组件都不会缓存
max--数字。最多可以缓存多少组件
4.代码实例
<template>
<div>
<a href="#" @click.prevent="comName = 'login'">登录</a>
<a href="#" @click.prevent="comName = 'register'">注册</a>
<a href="#" @click.prevent="comName = 'logOut'">退出</a>
// login组件会被缓存 不设置include会默认缓存所有挂载到<component></component>的组件
// 缓存多个指定组件include = ['login','register']
<keep-alive include="login">
<component :is="comName"></component>
</keep-alive>
</div>
</template>
二.代码的实例
APP.vue(没有include做缓存的时候)
<template>
<div class="">
<div class="aa">
<button @click="aa = 'shouye'">首页</button>
<button @click="aa = 'firend'">朋友</button>
<button @click="aa = 'user'">用户</button>
</div>
<keep-alive>
<component :is="aa"></component>
</keep-alive>
</div>
</template>
<script>
import firend from "./components/firend.vue";
import shouye from "./components/shouye.vue";
import user from "./components/user.vue";
export default {
data() {
return {
aa: "user",
};
},
components: {
shouye: shouye,
firend,
user,
},
};
</script>
<style scoped>
.aa {
display: flex;
margin-top: 600px;
}
button {
flex: 1;
}
</style>
firend.vue
<template>
<div class="">
<h1>朋友的页面</h1>
</div>
</template>
<script>
export default {
created() {
console.log("friend 组件创建");
},
activated() {
console.log("friend 组件 激活");
},
methods: {},
};
</script>
<style scoped></style>
shouye.vue
<template>
<div class="">
<h1>我是一个首页</h1>
</div>
</template>
<script>
export default {
activated() {
console.log("首页组件生成");
},
deactivated() {
console.log("首页组件被销毁");
},
name: "",
methods: {},
};
</script>
<style scoped></style>
user.vue
<template>
<div class="">用户的界面</div>
</template>
<script>
export default {
activated() {
console.log("用户组件被生成");
},
deactivated() {
console.log("用户组件被销毁");
},
name: "",
methods: {},
};
</script>
<style scoped></style>
图示:
也可以使用include来进行缓存:
<keep-alive include="shouye">
<component :is="aa"></component>
</keep-alive>
图示:
当缓存较多的组件的时候:
<keep-alive :include="['shouye', 'firend', 'user']">
<component :is="aa"></component>
</keep-alive>
当有name属性写了准备的值的时候,以name属性为准。不会以为include里面为准。
列如:在name里面的名字是friends
<script>
export default {
name: "friends",
created() {
console.log("friend 组件创建");
},
activated() {
console.log("friend 组件 激活");
},
methods: {},
};
</script>
在App.vue里面是firend:
<keep-alive :include="['shouye', 'firend', 'user']">
<component :is="aa"></component>
</keep-alive>
name的优先级要大一些,此时不会做缓存。
图示: