【九月打卡】第8天 Teleport&Suspense组件的应用

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：初识 Vue3.0： 新特性详解（15~18节）

课程讲师：张轩

课程内容：

1. Teleport组件的应用，通常应用于项目中的modal，dialog等
2. Suspense组件的应用主要是用来渲染异步组件的作用，以及使用suspense需要注意的地方

课程收获：

• Teleport组件（瞬移组件）:
  将包裹的组件移动至指定的外层元素，避免组件层级嵌套过深干扰；同时也将样式从其他组件中移出，避免样式混乱；如下方代码：teleport有一个to属性，他的值指向我们需要的将组件移动到的容器的id，即id为modal的div中，这样不管我们的teleport组件防止在何处，最终都会被渲染在id为modal的div中，这就实现了组件的位置瞬移至与app同级，也叫作瞬移组件。这类组件通常用在全局的弹窗上，或者成功失败的提示语删除提示弹窗等等。

<template>
	<teleport to="#modal">
		<div>
			这是一个全局的弹窗组件
		</div>
	</teleport>
</template>

// 要渲染的dom的位置
<div id="app"></div>
<div id="modal"></div>

• suspense组件：
  是vue3推出的一个内置的特殊组件，其包裹的组件需要在setup中返回一个promise。如下代码：suspense组件内部有两个具名插槽，一个是fallback，它是当suspense还没有显示的时候先预显示的内容，而名为default的插槽就是suspense真正要显示的内容，必须返回一个promise，也就是我们需要展示的带数据的内容。这里我们用settimeout演示异步请求数据的延迟，初进页面我们先看到loading…，然后3秒我们会看到数字12，这就是异步组件的用法。

<template>
		<div>
			{{result}}
		</div>
</template>

// 封装的组件 asyncshow
export default definecomponent ({
	setup(){
		return new promise((resolve) =>{
			setTimeout(() =>{
				return resolve({
				result: 12
				})
			}, 30000)
		})
	}
})

// 引入组件
<suspense>
	<template #default>
		<async-show></async-show>
	</template>
	<template #fallback>
		loading....
	</template>
</suspense>

//  asyncshow修改为async.. await
export default definecomponent ({
	async setup(){
	const resData = await axios.get(url)
		return resolve({
			result: resData.count
		})
	}
})

这节课主要学习了vue两个新组建的应用，这对于我们在项目中封装组件起到了很大的提示，实用性非常强。