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

1.组件切换

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

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

2.缓存机制keep-alive

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

<div id="app">
    <div class="container">
        <div @click="comp='zujian1'">显示组件1</div>
        <div @click="comp='zujian2'">显示组件2</div>
    </div>
    <keep-alive><!--一般用作缓存：为的是后面的路由做准备，如果缓存了就不会再走created mounted钩子函数-->
    <div :is="comp"></div>
    </keep-alive>
</div>
...
var app=new Vue({
        el:'#app',
        data:{
            comp:'zujian2',
        },
        //需要等待子组件挂载完成后再触发父组件的挂载
       mounted(){
            alert('子组件挂载完，父组件才会挂载完')
        },
        components:{
            zujian1:{
                template:'<h1>组件1</h1>',
                mounted(){
                  alert('重新渲染dom')
                },
                beforeDestroy(){
                  alert('销毁了')
                }
            },
            zujian2:{
                template:'<h1>组件2</h1>',
                mounted(){
                  alert('重新渲染dom')
                },
                beforeDestroy(){
                  alert('销毁了')
                }
            }
        }
    })

组件的选择性缓存 include exclude

<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>

路由的选择性缓存

<keep-alive v-if='$route.meta.keep'>
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <vue-router></vue-router> 
</keep-alive>
<vue-router  v-if='!$route.meta.keep'></vue-router>

最后编辑于：2019.03.27 11:12:24