2022-02-08 Vue3.0 中的 Teleport 和 Suspense

Teleport

将组件 html 结构移动到指定位置

<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

import { defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(() => import('./components/Child.vue'))

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot: default>
				<Child/>
			</template>
			<template v-slot: fallback>
				<h3>加载中……</h3>
			</template>
		</Suspense>
	</div>
</template>