一、Suspense【試驗(yàn)性，可能變動，生產(chǎn)環(huán)境請勿使用】

官方說明：在正確渲染組件之前進(jìn)行一些異步請求是很常見的事。suspense允許將等待過程提升到組件樹中處理，而不是在單個(gè)組件中。

實(shí)例： 有一個(gè)組件的一些數(shù)據(jù)需要異步請求，請求完成后再渲染。為了顯示友好，我們會在請求返回前顯示一個(gè)Loading。進(jìn)入頁面，顯示 Loading，3秒后，顯示為 Hello

1.1. vue2實(shí)現(xiàn)

在vue2中，通常我們是定義一個(gè)變量來操作這個(gè)loading的顯示與否

<template>
  <div class="pager">
    <div v-if="loading">Loading</div>
    <div v-else>{{data}}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,
        data: ''
      }
    },
    created() {
      this.load();
    },
    methods: {
      load() {
        this.loading = true;
        return new Promise((resolve) => {
		  setTimeout(()=>{
		    this.data= 'hello'
            this.loading = false;
			resolve('hello')
		  }, 3000)
	   })
      }
    }
  }
</script>

1.2. vue3-suspense 實(shí)現(xiàn)

1.2.1. 父組件

//父組件
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
	<suspense>
	  <template #default>
	    <HelloWorld/>
	  </template>
	  <template #fallback>
			Loading
		</template>
	</suspense>
</template>

1.2.2. 子組件-helloWold

//子組件 - HelloWorld
<script setup>
import { ref } from 'vue';
const data = ref('');
const load = function() {
	return new Promise((resolve) => {
		setTimeout(()=>{
			data.value = 'hello'
			resolve('hello')
		}, 3000)
	})
}
await load(); 
</script>
<template>
  {{data}}
</template>

關(guān)鍵點(diǎn)： await將setup隱性添加了一個(gè)async的關(guān)鍵字，也就是 Promise的返回
注意事項(xiàng)： 子組件的加載方式為異步加載 ，或者子組件的setup應(yīng)返回一個(gè)Promise，async關(guān)鍵字為隱性的Promise返回。

二、Teleport【傳送】

遠(yuǎn)距離傳送, 可以將teleport內(nèi)的element移到組件外的特定位置。

官方說明： Teleport 提供了一種干凈的方法，允許我們控制在DOM中哪個(gè)父節(jié)點(diǎn)下渲染了 HTML，而不必求助于全局狀態(tài)或?qū)⑵洳鸱譃閮蓚€(gè)組件。

優(yōu)點(diǎn)： 添加組件的靈活性，原先由于布局、層級等原因【類似按鈕和觸發(fā)彈窗等】，需要拆分到不同位置【不同組件】的相關(guān)聯(lián)操作，也可以更好的封裝起來。

props：【官方摘要】

• to[string]。必填，必須是有效的查詢選擇器或 HTMLElement (如果在瀏覽器環(huán)境中使用)。指定將在其中移動 內(nèi)容的目標(biāo)元素
• disabled[boolean]?？蛇x，此屬性可用于禁用 的功能，這意味著其插槽內(nèi)容將不會移動到任何位置，而是在你在周圍父組件中指定了 的位置渲染。

Teleport 是一種能夠?qū)⑽覀兊哪０逡苿拥?DOM 中 Vue app 之外的其他位置的技術(shù)。

2.1. Teleport用法

用法非常簡單，只需要使用 to 這個(gè)屬性就可以把組件渲染到想要的位置

// 渲染到body標(biāo)簽下
<teleport to="body">
  <div class="modal">
    I'm a teleported modal!
  </div>
</teleport>

也可以使用

<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

必須是有效的查詢選擇器或 HTMLElement。

2.2. 應(yīng)用場景

當(dāng)自己封裝一個(gè)彈窗的時(shí)候，我們使用 position: fixed，當(dāng)父元素使用 transform或者filter濾鏡的時(shí)候，會使得position: fixed降級為absolute，這個(gè)時(shí)候我們就可以利用Teleport，把元素追加到body上面

position:fixed 降級為absolute的問題 見文末補(bǔ)充介紹

// 渲染到body標(biāo)簽下
<teleport to="body">
  <Modal></Modal>
</teleport>

補(bǔ)充:position:fixed 降級為absolute的問題

position:fixed 降級為absolute的問題

本篇文章匯總一下position:fixed 降級為absolute的情況

transform影響fixed

元素設(shè)置position:fixed后大家都知道可以讓元素不跟隨滾動條滾動（固定到視口），但是transform可以把position:fixed干掉讓其降級成absolute。

<div style="transform:scale(1);">
    <img src="mm1.jpg"style="position:fixed;" />
</div>

本身應(yīng)該不動的圖片因?yàn)楦讣壴O(shè)置了transform而變成了absolute的效果。

filter

CSS3濾鏡（filter）

CSS3 中filter濾鏡屬性，也會把position:fixed干掉讓其降級成absolute。

到此這篇關(guān)于Vue3新特性Suspense和Teleport的文章就介紹到這了,更多相關(guān)Vue3 Suspense和Teleport內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論