第二十五节:Vue组件:Vue动态组件和keep-alive保持组件状态

1. 动态组件

动态组件:顾名思义就是组件会动态的切换显示

需求: 需要根据不同的状态显示不同的组件.

案例:示例代码如下:

vue.gif

我们能想到的就是使用v-if,或者v-show切换组件的显示

1.1. 使用`v-if` 或`v-show`指令切换组件

<style>
    .bottom{
        display:flex;
        position: fixed;
        bottom:0;
        left:0;
        right:0;
        height:50px;
        background: #fff;
        border-top:1px solid #ccc;
    }
    button{
        flex:1;
        border:0;
        outline:none;
        background: #fff;
    }
    .active{
        background: #ccc;
    }
</style>



<div id="app">
    <!-- 组件的切换 -->
    <Home v-if="com=='Home'"></Home>
    <Articl v-if="com=='Articl'"></Articl>
    <About v-if="com=='About'"></About>

    <!-- 切换组件的按钮 -->
    <div class="bottom">
        <button
                v-for="value in components"
                @click="change(value)" 
                :class="{active:com== value}"
                >
            {{value}}
        </button>
    </div>
</div>


<script>
    // 首页组件
    let Home = {
        template:`
        <div>
            <h2>Home组件</h2>
            用户名: <input type="text"/>
        </div>
    `
    }

    // 文章组件
    // 注意不能使用article 因为html有原生的article标签
    let Articl = {
        template:`
            <div>
                <h2>Article组件</h2>
            </div>
        `
    }

    // 关于作者组件
    let About = {
        template:`
            <div>
                <h2>About组件</h2>
            </div>
        `
    }



    // vue 实例
    var vm = new Vue({   
        el: '#app',
        data: {
            com:"Home",
            components:["Home","Articl","About"]
        },
        methods:{
            change(value){
                this.com = value;
            }
        },
        components: {
            Home,Articl,About
        },

    });
</script>

其实这样的操作不是特别友好, 如果有几十个组件这样切换就得每一个组件都要通过v-if指令处理

因此vue提供了动态组件帮我们处理同样的事情

1.2. 动态组件的基本用法

动态组件在不同组件之间进行动态切换是非常有用的.

通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：

使用动态组件重新处理上面的示例

将上面示例中的如下代码

 <!-- 组件的切换 -->
<Home v-if="com=='Home'"></Home>
<Articl v-if="com=='Articl'"></Articl>
<About v-if="com=='About'"></About>

替换为

<component :is="com"></component>

这样依然可以实现之前的效果.

此时is属性的值是通过v-bind指令动态绑定到data属性中的数据, 此时编译后is的值是哪一个组件的名字就显示哪一个组件.

2. 动态组件上使用 keep-alive

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

一般用于组件的切换,否则组件在切换时,会频繁的创建和删除组件,不太好,

这样也没法在组件切换是保存之前状态

2.1 未使用keep-alive

在未使用keep-alive保存组件状态时,每次的最切换都是在创建一个新组件,并且删除一个旧组件

每个组件也都有自己的生命周期,我们把生命周期函数添加上看看是不是每次切换组件都是在重新创建和删除组件

示例代码:

<script>
    // 首页组件
    let Home = {
        template:`
            <div>
                <h2>Home组件</h2>
                用户名: <input type="text"/>
            </div>
        `,
        created(){
            alert("Home组件实例化完毕")
        },
        beforeDestroy(){
            alert("Home组件将被删除")
        }
    }

    // 文章组件
    // 注意不能使用article 因为html有原生的article标签
    let Articl = {
        template:`
            <div>
                <h2>Article组件</h2>
            </div>
        `,
        created(){
            alert("Article实例化完毕")
        },
        beforeDestroy(){
            alert("Article组件将被删除")
        }
    }

    // 关于作者组件
    let About = {
        template:`
            <div>
                <h2>About组件</h2>
            </div>
        `,
        created(){
            alert("About实例化完毕")
        },
        beforeDestroy(){
            alert("About组件将被删除")
        }
    }


   
    // vue 实例
    var vm = new Vue({   
        el: '#app',
        data: {
            com:"Home",
            components:["Home","Articl","About"]
        },
        methods:{
            change(value){
                this.com = value;
            }
        },
        components: {
            Home,Articl,About
        },
        
    });
</script>

看视图:

动态组件.gif

因为每次组件切换都是新创建的组件,都是全新的,那么在组件切换前的组件状态将没发保存

2.2 使用keep-alive 保存状态

但是在这个案例中，我们更希望那些标签的Home组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

<!-- 缓存组件 -->
<keep-alive>
    <component :is="com"></component>
</keep-alive>

修改后的结果

缓存组件.gif

此时组件并不会被销毁,而是一直缓存着,因为keep-alive的原因