新组件原创
# 新组件
# Fragment
- 组件文件可以没有根标签,内部自动将所有标签包含在一个Fragment虚拟元素中
- 减少标签层级,减少内存占用。
# Teleport
- 将需要传送的组件嵌套在teleport内部
- 组件可直接相对于传送到的位置进行定位
<teleport to="选择器">
传送的组件
</teleport>
1
2
3
2
3
# Suspense
- 等待异步组件加载时,先渲染一些提示信息,优化用户体验
- defineAsyncComponent定义异步组件,接收动态导入
- 使用suspense包裹组件,配置在default插槽中。
- 在fallback插槽中配置骨架屏。
<template>
<suspense>
<template v-slot:default>
// 异步组件
</template>
<template v-slot:fallback>
// 骨架屏
</template>
</suspense>
</template>
<script>
// 异步组件定义函数
import {defineAsyncComponent} from "vue"
// 异步组件引入
const dialog = defineAsyncComponent(()=>import("./components/dialog"))
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17