这是我参与「第五届青训营」伴学笔记创作活动的第 18 天，今天在开发青训营大项目的过程中，继续学习了如何从头开发一个 Vue 3 的项目，包括 Vue 3 的基础语法等。
缓存组件
基本使用
默认情况下，一个组件实例在被替换掉后（例如通过 v-if 或者 is 属性）会被销毁。
通过 Vue 的内置组件 <KeepAlive>，可以将 <KeepAlive> 内部被销毁的组件缓存起来。当再次显示被销毁的组件时会渲染缓存的组件，而不是重新渲染一个组件。
使用缓存可以保持组件的状态。
包含或者排除组件
<KeepAlive> 的 include 和 exclude 属性可以包含或者排除使用缓存的组件。
在 include 或 exclude 属性中传入组件名字符串即可包含或者排除使用缓存的组件，多个组件名用 , 分割开。
最大缓存实例数
<KeepAlive> 的 max 属性可以指定最大缓存实例数。
在 max 属性中传入一个整数即可。
传送组件
使用 <Teleport> 内置组件可以将 <Teleport> 内的元素渲染到页面的其他地方，而不破坏组件之间的逻辑关系。
to 属性
在 <Teleport> 上指定 to 属性即可指定内部元素渲染的位置。
to 属性接收一个字符串，字符串为 CSS 选择器。
disabled 属性
在 <Teleport> 上指定 disabled 属性为 true 即可禁用传送。
组件插槽
基本使用
使用 <slot> 在子组件中定义插槽：
<button class="fancy-btn">
<slot></slot> <!-- 插槽出口 -->
</button>
在父组件中使用子组件，并在插槽中放入内容：
<FancyButton>
Click me! <!-- 插槽内容 -->
</FancyButton>
这样父组件中的插槽内容会渲染在子组件之中。
渲染作用域
插槽内容是属于父组件的，所以无法访问子组件的数据等。
默认内容
在子组件中定义插槽时，在 <slot> 标签内部放入元素，作为默认内容。当父组件没有传入插槽内容时，会渲染 <slot> 标签内的内容；否则，<slot> 标签内的内容会被父组件的插槽内容替代。
<button type="submit">
<slot>
Submit <!-- 默认内容 -->
</slot>
</button>
具名插槽
子组件中，在 <slot> 标签上定义属性 name 为插槽定义唯一名称。
父组件中，使用 <template #xxxxxx> 定义插槽内容，可以将内容放入指定名称的插槽中。
<BaseLayout>
<template #header>
<!-- header 插槽的内容放这里 -->
</template>
</BaseLayout>
父组件中，所有不在 <template #xxxxxx> 中的内容会被放入子组件的没有名称的 <slot> 标签内。
父组件中，使用 #[dynamicSlotName] 可以动态指定插槽名。
