vue组件切换与keep-alive缓存机制

1.组件切换

点击哪个按钮显示对应的组件 （其中存在组件的销毁）每次切换都会走一遍created mounted钩子函数

   
    

        
显示组件1
        
显示组件2
    
    


...
//关键是-----------------   :is用于绑定组件
var app=new Vue({
        el:'#app',
        data:{
            comp:'zujian2',
        },
       mounted(){
            alert('子组件挂载完，父组件才会挂载完')
        },
        components:{
            zujian1:{
                template:'
组件1
',
                mounted(){
                  alert('重新渲染dom')
                },
                beforeDestroy(){
                  alert('销毁了')
                }
            },
            zujian2:{
                template:'
组件2
',
                mounted(){
                  alert('重新渲染dom')
                },
                beforeDestroy(){
                  alert('销毁了')
                }
            }
        }
    })

2.缓存机制keep-alive

不会再走mounted，beforeDestroy函数，因为组件被缓存，不用销毁重新渲染，性能比较好

    

        
显示组件1
        
显示组件2
    
    
    

    

...
var app=new Vue({
        el:'#app',
        data:{
            comp:'zujian2',
        },
        //需要等待子组件挂载完成后再触发父组件的挂载
       mounted(){
            alert('子组件挂载完，父组件才会挂载完')
        },
        components:{
            zujian1:{
                template:'
组件1
',
                mounted(){
                  alert('重新渲染dom')
                },
                beforeDestroy(){
                  alert('销毁了')
                }
            },
            zujian2:{
                template:'
组件2
',
                mounted(){
                  alert('重新渲染dom')
                },
                beforeDestroy(){
                  alert('销毁了')
                }
            }
        }
    })

组件的选择性缓存 include exclude

路由的选择性缓存