1. 为什么要用 key-alive?
Vue缓存 避免反复重渲染导致的性能问题
2. 什么是 key-alive?
<keep-alive>
- 包裹动态组件时,会 缓存 不活动的组件实例,而 不是销毁 它们。
- 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
- 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个 生命周期钩子函数 将会被对应执行。
3. key-alive切换效果:
image.png image.png3. key-alive切换实例代码:
<div id="app">
<button @click="isRender">点我切换</button>
<keep-alive>
<component :is="arr[isRend==true?0:1]"></component>
<!--坑~is记得加上:冒号-->
</keep-alive>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var test1 = {
template:"<div>我是另外一个局部组件111</div>"
}
var test = {
template:"<div>我是一个局部组件000</div>",
activated(){
console.log(111,"我包裹在了keep-alive标签中")
},
deactivated(){
console.log(222,"隐藏包裹在keep-alive标签中组件的时候被触发")
}
}
var vm = new Vue({
el:"#app",
components:{
test,
test1
},
data:{
isRend:true,
arr:[test,test1]
},
methods:{
isRender(){
this.isRend = !this.isRend;
}
}
})
</script>
网友评论