keep-alive 路由被加载过一次后就会把内容放到内存中,会触发新的activated生命周期钩子(我们可以在这里搞事情),还有deactivated生命周期
keep-alive exclude="detail" exlude忽略detail这个组件就是不把这个组件放入缓存中
缓存组件keep-alive,频繁切换,但不重复渲染,使用场景tab切换等,性能优化的场景之一
可以在控制台看log 的输出情况
场景1
<template>
<!-- rights组件 -->
<div>
<button @click="show='a'">a</button>
<button @click="show='b'">b</button>
<!-- 切换时会一直触发多次moutend 和destroyed -->
<!-- <a1 v-if="show==='a'"></a1>
<b1 v-if="show==='b'"></b1> -->
<!-- 切换时只会触发一次moutend ,不会触发destroyed -->
<keep-alive>
<a1 v-if="show==='a'"></a1>
<b1 v-if="show==='b'"></b1>
</keep-alive>
</div>
</template>
<script type="text/ecmascript-6">
// import a1 from '../user/A'
export default {
data() {
return {
info: {
city: '城市'
},
show: 'a'
}
},
components: {
a1: () => import('../user/A'),
b1: () => import('../user/B')
},
methods: {
},
}
</script>
<style lang="scss" scoped>
button {
width: 100px;
}
</style>
<template>
<div>
A组件
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
console.log("mounted a");
},
destroyed() {
console.log("destoryed a");
},
};
</script>
<template>
<div>
<p>B组件</p>
</div>
</template>
<script type="text/ecmascript-6">
export default {
mounted() {
console.log('mounted b');
},
destroyed() {
console.log('destoryed b');
},
}
</script>
场景2 : 需求对城市首页做性能优化,使用keep-alive,相同的城市我们这样做没问题,但是城市一改变我们需要重新发请求,我们使用activated生命周期钩子再次发请求,!