在 Vue 中也提供了一些内置组件，例如：
- Transition
- TransitionGroup
- KeepAlive
- Teleport
- Suspense
component元素
component 并非组件，而是和 slot、template 等元素类似的一种特殊元素，这种元素是模板语法的一部分。但它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。
component 用于渲染动态组件，具体渲染的组件取决于 is 属性
文档地址：https://cn.vuejs.org/api/built-in-special-elements.html#component
KeepAlive基本使用
KeepAlive 是一个内置组件，该组件的主要作用是缓存组件的状态。
关键代码如下：
App.vue
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>router-view 组件通过作用于插槽拿到一个和当前路由所匹配的组件，然后将这个组件用于 component 元素的 is 属性。
最为关键的就是 component 元素外边包裹了 keep-alive 内置组件，该组件让状态得以保留。
KeepAlive相关细节
KeepAlive 是一个内置组件，该组件的主要作用是缓存组件的状态。
使用 KeepAlive 来保持组件状态的之后，可以使用**包含(include)/排除(exclude)**关键字来指定要缓存的组件，这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：
<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
<component :is="view" />
</KeepAlive>
<!-- 正则表达式 (需使用 v-bind) -->
<KeepAlive :include="/a|b/">
<component :is="view" />
</KeepAlive>
<!-- 数组 (需使用 v-bind) -->
<KeepAlive :include="['a', 'b']">
<component :is="view" />
</KeepAlive>例如：
<router-view v-slot="{ Component }">
<keep-alive include="Counter,Timer">
<component :is="Component" />
</keep-alive>
</router-view>以英文逗号分隔的时候，注意中间不要添加空格。
还可以接收一个 max 属性，用于指定最大缓存组件数。如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。
<router-view v-slot="{ Component }">
<keep-alive :max="3">
<component :is="Component" />
</keep-alive>
</router-view>
