vue的动态组件和＜keep-alive＞的使用

1.动态组件<component>可以实现动态组件的切换显示隐藏，但会销毁原组价，进入销毁阶段；<keep-alive>在切换时可以保持原组件不被销毁，被暂时缓存，再切换回原组件，不用在加载，可以提高性能。

2.<component>必须配合is属性使用，is的值就是引入需要加载的组件。<keep-alive>的使用非常简单，直接用<keep-alive>包裹<component>即可实现效果。

demo代码：

<!--<keep-alive>包裹<component>实现缓存切换，如果不使用<keep-alive>切换会将原组件销毁-->
<keep-alive><component :is="component"></component></keep-alive>

//引入组件
import Left from 'Left.vue';
import Right from 'Right.vue';

data(){
    return {
        component:'Left',   //将组件名给一个变量，is的值为这个变量，当变量变化，实现切换
    }
},
methods:{
    tab(){   //实现tab切换的方法
        this.component=Right;
    }
},
components:{
    Left,
    Right
}

3.针对keep-alive还有两个生命周期钩子函数：

activated()，在动态组件被激活（切换后呈现的组件）时触发；

deactivated()，当动态组件被缓存（切换后，不是这个组件）时触发；

4.被keep-alive包裹<component>后，默认是引入的将所有的组件都包裹。如果存在不需要缓存的组件的需求（keep-alive缓存组件会占据内存）。可以使用keep-alive的include属性指定需要缓存的组件，其它组件就不会缓存；使用exclude属性指定不需要缓存的组件，其它组件就会缓存。但是include和exclude，不能同时使用，只能使用其中的一个。如：

<!--加入引入了Left和Right两个组件。
include指定了"Left"缓存，那么Right就不会被缓存，当从Right切换到Left时，会销毁Right组件-->

<keep-alive include="Left"><component :is="component"></component></keep-alive>

5.当然，通过import引入组件的方式，引入注册使用三步骤比较麻烦。我们还可以在写组件时，在组件的export default中定义一个name属性，它的值就是组件名称。如果is写了组件的某一name属性的值，那么通过import引入注册的就不能使用，使用name的方式优先于import引入再注册的方式。

export default {
    name: "Left",     //定义组件名称
    data() {
        return {}
    }
}

我们在使用<component>就可以在不通过import引入再注册的方式，直接给is赋值Left.vue中的name值。

在实际开发中，通过在组件内部定义name属性，一般就是给<component>这样的情况使用的；而通过import引入的组件一般都是用在标签实例化上面。