vue中keep-alive的使用
场景:keep-alive可以将组件缓存起来,组件不会销毁,data数据不会重新加载,减少加载时间及性能消耗,提高用户体验性
<template>
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
被keep-alive包裹的组件新增了两个生命周期
activated () {
console.log('组件每次显示时触发')
},
deactivated () {
console.log('组件每次隐藏时触发')
},