Vue的动态组件,以及缓存keep-alive的使用

本文我们将介绍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>