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

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

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

1.1. vue2實現(xiàn)

在vue2中，通常我們是定義一個變量來操作這個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 實現(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>

關鍵點： await將setup隱性添加了一個async的關鍵字，也就是 Promise的返回
注意事項： 子組件的加載方式為異步加載 ，或者子組件的setup應返回一個Promise，async關鍵字為隱性的Promise返回。

二、Teleport【傳送】

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

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

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

props：【官方摘要】

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

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

2.1. Teleport用法

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

// 渲染到body標簽下
<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. 應用場景

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

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

// 渲染到body標簽下
<teleport to="body">
  <Modal></Modal>
</teleport>

補充:position:fixed 降級為absolute的問題

position:fixed 降級為absolute的問題

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

transform影響fixed

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

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

本身應該不動的圖片因為父級設置了transform而變成了absolute的效果。

filter

CSS3濾鏡（filter）

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

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

最新評論