《vue3第五章》新的元件，包含：Fragment、Teleport、Suspense

刘大猫發表於2024-10-30

Vue元件Fragment

五、新的元件
- 1.Fragment
- 2.Teleport
  - 案例
  - 完整程式碼
- 3.Suspense
  - 案例
  - 完整程式碼
本人其他相關文章連結

五、新的元件

1.Fragment

在Vue2中: 元件必須有一個根標籤
在Vue3中: 元件可以沒有根標籤, 內部會將多個標籤包含在一個Fragment虛擬元素中
好處: 減少標籤層級, 減小記憶體佔用

2.Teleport

問題：什麼是Teleport？

答案：Teleport 是一種能夠將我們的元件html結構移動到指定位置的技術。

<teleport to="移動位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一個彈窗</h3>
			<button @click="isShow = false">關閉彈窗</button>
		</div>
	</div>
</teleport>

注意點1：

問題：使用傳送的好處？

答案：不影響其他元件html的結構，舉例說明我son元件有個div，我有個顯示按鈕，有個隱藏按鈕，如果不使用Teleport，那麼每次展示div時候會影響別的元件html結構，而使用Teleport就不會影響，具體效果看案例結果一目瞭然。

注意點2:
好處是方便定位，直接把html結構直接傳送走，比如案例的傳送至body處或者其他處。

案例

完整程式碼

專案結構

main.js

//引入的不再是Vue建構函式了，引入的是一個名為createApp的工廠函式
import { createApp } from 'vue'
import App from './App.vue'

//建立應用例項物件——app(類似於之前Vue2中的vm，但app比vm更“輕”)
const app = createApp(App)

//掛載
app.mount('#app')

App.vue

<template>
	<div class="app">
		<h3>我是App元件</h3>
		<Child/>
	</div>
</template>

<script>
	import Child from './components/Child'
	export default {
		name:'App',
		components:{Child},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

Child.vue

<template>
	<div class="child">
		<h3>我是Child元件</h3>
		<Son/>
	</div>
</template>

<script>
	import Son from './Son'
	export default {
		name:'Child',
		components:{Son},
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>

Son.vue

<template>
	<div class="son">
		<h3>我是Son元件</h3>
		<Dialog/>
	</div>
</template>

<script>
	import Dialog from './Dialog.vue'
	export default {
		name:'Son',
		components:{Dialog}
	}
</script>

<style>
	.son{
		background-color: orange;
		padding: 10px;
	}
</style>

Dialog.vue

<template>
	<div>
		<button @click="isShow = true">點我彈個窗</button>
		<teleport to="body">
			<div v-if="isShow" class="mask">
				<div class="dialog">
					<h3>我是一個彈窗</h3>
					<h4>一些內容</h4>
					<h4>一些內容</h4>
					<h4>一些內容</h4>
					<button @click="isShow = false">關閉彈窗</button>
				</div>
			</div>
		</teleport>
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Dialog',
		setup(){
			let isShow = ref(false)
			return {isShow}
		}
	}
</script>

<style>
	.mask{
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.dialog{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 300px;
		height: 300px;
		background-color: green;
	}
</style>

結果展示：

使用Teleport-案例結果.gif

未使用Teleport-案例結果.gif

3.Suspense

等待非同步元件時渲染一些額外內容，讓應用有更好的使用者體驗
使用步驟：

第1步：非同步引入元件

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

第2步：使用Suspense包裹元件，並配置好default與 fallback

<template>
	<div class="app">
		<h3>我是App元件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>載入中.....</h3>
			</template>
		</Suspense>
	</div>
</template>

注意點1：

靜態引入，當網速調低時，兩個元件仍然同步出現

import Child from './components/Child'//靜態引入

如圖：靜態引入-兩元件同步出現.gif

非同步引入，當網速調低時，兩個元件出現時間有先後

import {defineAsyncComponent} from 'vue' 
const Child = defineAsyncComponent(()=>import('./components/Child')) //非同步引入

如圖：非同步引入-兩元件出現時間有先後.gif

注意點2：
總結：靜態引入會一直等載入完成外部才載入渲染，而非同步引入會按載入時間先後順序展示，效果更好些。

問題1：靜態引入和非同步引入區別是啥？

答案：對於靜態引入方式來說，只要如圖1中第9行沒引入成功，那麼2-5行的整個div元素都不會渲染，因為第4行等你你引入成功使用呢。

如圖1

問題2：如果都用靜態引入會引發什麼問題呢？

答案：如圖2，只要最裡面的小紅色框載入慢了，那麼它外部的所有人都會等最內部紅色框載入完成後再去載入，外部所有人都跟著受影響。即：什麼時候展示取決於最慢的那個人。

如圖2

注意點3：

問題：非同步引入雖然好些，但是它也存在一個小小的問題

答案：顯示會抖動，比如正常會顯示2個div，但使用者不知道會顯示幾個，當網速慢只顯示出來1個的時候，使用者以為顯示完了，結果歘一下又蹦出來一個div，這就叫抖動效果，明顯不友好。因此使用Suspense就可以解決這個非同步顯示有先後的問題。

注意點4：
這個Suspense就相當於插槽，人家給你提供了2個插槽，其中第1個插槽用於展示你真正想展示的內容，而第2個插槽用來展示你內容還沒載入出來時候的替代展示內容。

其中：插槽的2個名字不可以修改，只能用這個：v-slot:default和v-slot:fallback
<template v-slot:default> 中間報過你真正想展示的內容
<template v-slot:fallback> 用於展示未載入完成時替代展示的內容

注意點5：
讓你的元件等一等再載入，有2種方法：

方法1：使網速變慢，且使用Suspense非同步載入

<Suspense>
	<template v-slot:default>
		<Child/>
	</template>
	<template v-slot:fallback>
		<h3>稍等，載入中...</h3>
	</template>
</Suspense>

方法2：使用Promise

async setup(){
	let sum = ref(0)
	let p = new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve({sum})
		},3000)
	})
	return await p
}

案例