本文我们将介绍Vue的动态组件,以及缓存keep-alive的使用,包括动态组件的使用方法,以及如何使用keep-alive实现组件的缓存效果
一: 动态组件
概念 : 动态组件是让多个组件使用同一个挂载点,并动态切换.动态组件是Vue的一个高级用法
用法 : 通过使用保留的<component>元素,动态地把组件名称绑定到它的is特性,可以实现动态组件
案例 :
<div id="app">
<component :is="currentView"></component>
<button @click="changeView('A')">切换到A</button>
<button @click="changeView('B')">切换到B</button>
<button @click="changeView('C')">切换到C</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('ComponentA',{
template:'<div>组件A</div>'
})
Vue.component('ComponentB',{
template: '<div>组件B</div>'
})
Vue.component('ComponentC',{
template: '<div>组件C</div>'
})
var vm=new Vue({
el:'#app',
data(){
return {
currentView:'ComponentB'
}
},
methods:{
changeView(name){
this.currentView=`Component&{name}`
}
}
})
</script>
二:keep-alive
概念 : keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素.被keep-alive缓存的组件只有在初次渲染时才会被创建,并且当组件切换时不会被销毁
用法 : keep-alive第二幕用法相对简单,直接使用keep-alive包裹需要缓存的组件即可
案例 :
<div id="app">
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
<button @click="changeView('A')">切换到A</button>
<button @click="changeView('B')">切换到B</button>
<button @click="changeView('C')">切换到C</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('ComponentA',{
template:'<div>组件A</div>',
created(){
console.log('组件A created');
}
})
Vue.component('ComponentB',{
template:'<div>组件B</div>',
created(){
console.log('组件B created');
}
})
Vue.component('ComponentC',{
template:'<div>组件C</div>',
created(){
console.log('组件C created');
}
})
var vm=new Vue({
el:'#app',
data(){
return {
currentView(name){
this.currentView=`Component&{name}`
}
}
}
})
</script>
注 : keep-alive缓存的组件只有在初次渲染时才会被创建.所以,我们通过修改currentView切换组件时,组件的beforeDestroy事件不会触发.若该组件是第一次渲染,会触发created事件,当再次切换显示该组件时,created事件不会再次触发
三 : activated和deactivated
概念 : activated和deactivated和我们之前学习的生命周期函数一样,也是组件的生命周期函数过activated和deactivated只在<keep-alive></keep-alive>内的所有嵌套组件中触发.activated:进入组件时触发.deactivated:退出组件时触发
案例 :
<div id="app">
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
<button @click="changeView('A')">切换到A</button>
<button @click="changeView('B')">切换到B</button>
</div>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('ComponentA',{
template:'<div>组件A</div>',
activated(){
console.log('组件A 被添加');
},
deactivated(){
console.log('组件A 被移除');
}
})
Vue.component('ComponentB',{
template:'<div>组件B</div>',
activated(){
console.log('组件B 被添加');
},
deactivated(){
console.log('组件B 被移除');
}
})
var vm=new Vue({
el:'#app',
data(){
return {
currentView:'ComponentB'
}
},
methods:{
changeView(name){
this.currentView=`Component&{name}`
}
}
})
</script>
四 : include和exclude
概念 : include和exclude是keep-alive的两个属性,允许组件有条件地缓存.include:可以是字符串或正则表达式,用来表示只有名陈匹配的组件会被缓存.exclude: 可以是字符串或正则表达式,用来表示名称匹配的组件不会被缓存
<div id="app">
<keep-alive include="ComponentsA,componentB"> <!-- 此处include可改为exclude -->
<component is="currentView"></component>
</keep-alive>
<button @click="changeView('A')">切换到A</button>
<button @click="changeView('B')">切换到B</button>
<button @click="changeView('C')">切换到C</button>
</div>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
include的代码
<script type="text/javascript">
Vue.component('ComponentA',{
template:'<div>组件A</div>',
created(){
console.log('组件A created');
},
activated(){
console.log('组件A 被添加');
},
deactivated(){
console.log('组件A 被移除');
}
})
Vue.component('ComponentB',{
template:'<div>组件B</div>',
created(){
console.log('组件B created');
},
activated(){
console.log('组件B 被添加');
},
deactivated(){
console.log('组件B 被移除');
}
})
Vue.component('ComponentC',{
template:'<div>组件C</div>',
created(){
console.log('组件C created');
},
activated(){
console.log('组件C 被添加');
},
deactivated(){
console.log('组件C 被移除');
}
})
var vm = new Vue({
el:'#app',
data(){
return {
currentView:'ComponentB'
}
},
methods: {
changeView(name){
this.currentView=`Component&{name}`
}
},
})
</script>
exclude的代码 需把html中的include改成exclude,其他不变
<script type="text/javascript">
Vue.component('ComponentA',{
template:'<div>组件A</div>',
created(){
console.log('组件A created');
}
})
Vue.component('ComponentB',{
template:'<div>组件B</div>',
created(){
console.log('组件 B created');
}
})
Vue.component('ComponentC',{
template:'<div>组件C</div>',
created(){
console.log('组件C created');
}
})
var vn=new Vue({
el:'#app',
data(){
return {
currentView:'ComponentB'
}
},
methods:{
changeView(name){
this.currentView=`Component&{name}`
}
}
})
</script>