vue——动态组件、keep-alive

1.在vue的实例中，提供了一个内置的<component>组件，专门用来实现动态组件的渲染，可以使组件在使用时不必写死。

具体用法：

//以在App组件中使用Left组件为例
//1.原来的组件使用，直接在App的<template></template>中以标签形式使用
<template>
    <Left></Left>
</template>
//2.使用动态组件后，改为下面所示
<template>
    <component is="Left"></component>
</template>

component相当于占位符，而is属性用来决定为谁占位，也就是is属性的值表示要渲染的组件

2.keep-alive:使组件保持被创建的状态，不使用时缓存起来

用法：

<template>
    <keep-alive>
        <component is='Left'></component>
    </keep-alive>
</template>

keep-alive对应的生命周期：

①当组件被缓存时，会自动触发组件的deactive生命周期函数

②当组件被激活时，会自动触发组件的active生命周期函数

keep-alvie组件的include和exclude属性：

①include属性：指定某个组件被缓存，多个组件使用（英文）逗号分隔，如下代码所示：

<template>
    <keep-alive include='Left,Right'>
        <component is='Left'></component>
    </keep-alive>
</template>

表示Left,Right组件被缓存

②exclude属性：排除谁不被缓存，用法与上面一样

注意：这两个属性不能同时使用