vue动态组件component及keep-alive 保持状态

1.什么是动态组件

动态组件指的是动态切换组件的显示与隐藏。

2.如何实现动态组件渲染

vue 提供了一个内置的组件，专门用来实现动态组件的渲染。示例代码如下：

可以理解这个组件就是占位符，给组件占位的

每次切换都会把上一个组件销毁，然后渲染下一个组件，对于多次切换而言，显然每次的销毁和重新渲染，很大消耗了我们的性能。可以通过keep-alive对组件进行缓存，对于不显示的组件不是去销毁他，而是是他出于不激活的状态，当需要时再去激活。

3.使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的组件保持动态组件的状态。示例代码如下：

4.keep-alive 对应的生命周期函数

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

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

这俩只有使用了keep-alive才可用

当组件第一次被创建的时候，即会执行 created 生命周期，也会执行 activated 生命周期

组件被激活时，只会触发 activated 生命周期，不再触发created，因为组件没有被重新创建

5.keep-alive 的 include 属性

include属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔：

扩展：可以使用 exclude 指定哪些组件不被缓存，但不要同时使用这个两个属性

了解组件注册名称和组件声明时name的区别

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
  </div>
</template>

<script>
export default {
  // 当提供了 name 属性之后，组件的名称，就是 name 属性的值
  // 对比：
  // 1. 组件的 “注册名称” 的主要应用场景是：以标签的形式，把注册好的组件，渲染和使用到页面结构之中
  // 2. 组件声明时候的 “name” 名称的主要应用场景：结合 <keep-alive> 标签实现组件缓存功能；以及在调试工具中看到组件的 name 名称
  name: 'MyRight'
}
</script>
//-----------分割线-----------
<keep-alive include="MyRight">
    <component :is="comName"></component>
</keep-alive>

参考资料