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

1. 动态组件

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

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

案例:示例代码如下:

image

我们能想到的就是使用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>

看视图:

image

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

2.2 使用keep-alive 保存状态

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

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

修改后的结果

image

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