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

1. 动态组件

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

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

案例:示例代码如下:

vue.gif

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

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

    
    
    
    

    
    

        
            {{value}}
        
    

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

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

1.2. 动态组件的基本用法

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

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

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

将上面示例中的如下代码

替换为

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

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

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

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

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

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

2.1 未使用keep-alive

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

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

示例代码:

看视图:

动态组件.gif

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

2.2 使用keep-alive 保存状态

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

修改后的结果

缓存组件.gif

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