vue3的传送门teleport究竟有多神奇？suspense发起异步请求有多简约？
一文講解vue3的Teleport和Suspense
- 一、👋用teleport實現打開模態框操作
- 1、teleport是什么
- 2、實現模態框功能
- （1）設置錨點
- （2）定義子組件
- （3）定義父組件
- 二、🤚用Suspense
- 1、Suspense是什么
- 2、用Suspense發起一個異步請求
- 3、用Suspense發起多個異步請求
- 4、如何抓取錯誤
- 三、🖐?結束語
大家都知道，在我們平常的前端開發中，實現模態框和發起異步請求是再常見不過的事情了。但是呢，不管是用vue2和原生js的實現方式，從邏輯上來說都還不夠獨立，因此，vue3推出了新的方法來解決此問題。
下面就帶領大家一起來了解vue3新推出的 teleport 究竟有多神奇？以及如何用 suspense 發起多個異步的請求？
一起來學習吧~📚
一、👋用teleport實現打開模態框操作
1、teleport是什么
teleport，字面意思就是遠距離傳送，我們可以把它理解為傳送門的意思。
大家都知道，傳送門的意思就是從一個地方傳送到了另外一個地方。而 vue3 為什么要用 teleport 來表達呢？
其實，有一個非常常見的需求就是，我們經常要通過點擊一個按鈕，來實現模態框的效果。而在 vue3 之前，我們基本上控制它都是點擊后上下會形成一個父子組件的關系，這樣子感覺獨立性就沒有那么強了。
因此， vue3 為了解決該問題，就用了 teleport 來解決。 teleport 就仿佛一個傳送門，像上圖這樣，比如我們點擊了打開按鈕，那么點擊完了之后，使用傳送門瞬間移動到另外一個地方（模態框 Model ）。再點擊關閉按鈕，傳送門模態框 Modal 就消失了。
通過這樣的解釋，相信大家對 teleport 有了一個基礎的認識。
2、實現模態框功能
接下來我們就來用這個功能，實現一個模態框，控制組件的顯示和隱藏。
（1）設置錨點
我們現在 vue3 項目下的 /public/index.html 設置一個錨點，來放置組件的內容。具體代碼如下：
<body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div>//先行定義一個錨點<div id="modal"></div><!-- built files will be auto injected --></body>（2）定義子組件
接下來我們在 /src/components 下定義一個子組件，命名為 Modal.vue 。具體代碼如下：
<template><teleport to="#modal"><div id="center" v-if="isOpen"><h2><slot>this is a modal</slot></h2><button class="btn2" @click="buttonClick">Close</button></div></teleport> </template><script> import { defineComponent } from 'vue' export default defineComponent({//父組件的數據需要通過props把數據傳給子組件，props的取值可以是數組也可以是對象props: {isOpen: Boolean,},//子組件向父組件傳遞數據//使用emits，更明確的顯示組件的自定義事件有哪些emits: {'close-modal': null},//props對應props的內容//context名字可以自定義，只要上下對應即可，用來觸發emit的內容setup(props, context){const buttonClick = () => {context.emit('close-modal')}return{buttonClick}} }) </script><style> #center{width:200px;height:200px;border:2px solid rgb(105, 165, 56);text-align: center;border-radius: 2px;margin: 50px auto 0; } .btn2{background: #1971c9;border:none;padding: 8px;border-radius: 5px;color: #fff;cursor: pointer; } </style>（3）定義父組件
之后我們再來定義一個父組件，命名為 index.vue 。具體代碼如下：
<template><button class="btn1" @click="openModal">打開模態框</button><modal :isOpen="modalIsOpen" @close-modal="onModalClose">My Modal!!!</modal> </template><script lang="ts"> import { ref, defineComponent} from 'vue' import Modal from './components/Modal.vue'export default defineComponent({name: 'App',components: {Modal},setup(){//添加響應式對象控制是否顯示const modalIsOpen = ref(false)//打開模態框事件const openModal = () => {modalIsOpen.value = true}//關閉模態框事件const onModalClose = () => {modalIsOpen.value = false}return{modalIsOpen,openModal,onModalClose}} }); </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2d4c6b;margin-top: 60px; } .btn1{background: #1971c9;border:none;padding: 16px;border-radius: 5px;color: #fff;cursor: pointer; } </style>現在我們來看下瀏覽器的顯示效果：
大家可以看到，通過 teleport 的方式，現在的模態框成功顯示在 id 為 app 的 div 同一層下，達到了相互獨立，而不再是父子層級的結果。
在上面的案例中，我們學習到了通過使用 vue3 新推出的 teleport 特性，將組件渲染到另外一個 DOM 節點的方法，這樣使得組件之間的獨立性更強。
二、🤚用Suspense
1、Suspense是什么
我們都知道，在 web 世界中，經常遇到很多的異步請求困境。在發起異步請求時，我們往往需要去判斷這些異步請求的狀態，然后呢，根據這些請求來展示不同的界面。
那現在呢， vue3 推出了一個新的內置組件 Suspense ， Suspense 是一個特殊的組件，它會有兩個 template slot ，剛開始會渲染 feedback 內容，直到達到某個條件以后，才會渲染正式的內容，也就是default的內容。這樣呢，進行異步內容的渲染就會變得特別簡單。
同時值得注意的是，如果使用 Suspense ，要返回一個 promise 而不是一個對象。
2、用Suspense發起一個異步請求
接下來我們使用 Suspense 來發起一個異步請求。
首先我們在項目下定義一個子組件，命名為 AsyncShow.vue ，具體代碼如下：
<template><h1>{{result}}</h1> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({setup() {//使用Suspense需要返回一個對象return new Promise((resolve) => {setTimeout(() => {return resolve({result: '10000'})}, 3000)})} }) </script>之后在項目下再定義一個父組件，命名為 DogShow.vue ，具體代碼如下：
<template><div id="app"><Suspense><template #default><async-show /></template><template #fallback><h1>Loading !...</h1></template></Suspense></div> </template><script lang="ts"> import { defineComponent } from 'vue' import AsyncShow from './components/AsyncShow.vue'export default defineComponent({name: 'App',components: {AsyncShow,},setup() {} }); </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } h1 {font-size: 6rem; } </style>最終瀏覽器的顯示效果如下：
大家可以看到，通過 Suspense ，可以很輕易的發起一個異步請求。剛開始是fallback狀態，之后達到 3s 的時間之后，切換到default的狀態，顯示出對應的異步請求內容。
3、用Suspense發起多個異步請求
我們不滿足于現狀，且互聯網千奇百怪的，我們總不能一直只發送一個異步請求吧！所以，接下來我們就來實現發起多個異步請求的效果。
首先我們用一個免費的在線API ，來發起一個請求。接下來我們在項目的 components 文件下，再定義一個子組件，命名為 DogShow.vue ，具體代碼如下：
<template><img :src="result && result.message"> </template> <script lang="ts"> import axios from 'axios' import { defineComponent } from 'vue' export default defineComponent({async setup() {const rawData = await axios.get('https://dog.ceo/api/breeds/image/random')return {result: rawData.data}} }) </script>接下來我們再把以上子組件的內容添加到父組件中，具體代碼如下：
<template><div id="app"><Suspense><template #default><async-show /><dog-show /><template #fallback><h1>Loading !...</h1></template></Suspense></div> </template><script lang="ts"> import AsyncShow from './components/AsyncShow.vue' import DogShow from './components/DogShow.vue'export default {name: 'App',components: {AsyncShow,DogShow},setup() {} }; </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } h1 {font-size: 6rem; } </style>最終瀏覽器的顯示效果如下：
大家可以看到，我們同時發起了兩個異步請求，并且在Suspense中的default插槽里面同時使用。同樣的，瀏覽器會先顯示fallback的內容，之后等到時機到了，就顯示我們請求的內容。
依據這樣的例子，顯示更多的請求也同樣有效。這樣對比起來，發送多個異步請求是不是就方便了許多。
4、如何抓取錯誤
學完上面的內容，相信大家對Suspense的用法已經有所了解。那么，網絡請求千奇百怪的，總不能每次都能夠很順暢的發起請求對吧。所以呢，我們來需要再來學習一下，當網絡請求失敗時，如何抓取Supsense包裹下的錯誤。
這個時候我們可以使用一個鉤子函數，這個函數叫做 onErrorCaptured ，接下來我們來看下怎么抓取。
我們將父組件 index.vue 進行改造，具體代碼如下：
<template><div id="app"><p>{{error}}</p><Suspense><template #default><async-show /><dog-show /><template #fallback><h1>Loading !...</h1></template></Suspense></div> </template><script lang="ts"> import { onErrorCaptured } from 'vue' import AsyncShow from './components/AsyncShow.vue' import DogShow from './components/DogShow.vue'export default {name: 'App',components: {AsyncShow,DogShow},setup() {const error = ref(null)onErrorCaptured((e: any) => {error.value = ereturn true})return{error}} }; </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } h1 {font-size: 6rem; } </style>此時我們再將 DogShow.vue 的接口進行修改，讓其變成一個無效的API。代碼如下：
const rawData = await axios.get('https://dog.ceo/api/breeds/image')接下來我們就來看一下瀏覽器的運行效果：
大家可以看到，修改成無效的 API 后，狗狗的圖片也不顯示了，最后最上方就是通過 onErrorCaptured 這個生命周期捕捉到的錯誤，清晰明了。
三、🖐?結束語
到這里， teleport 和 Suspense 的內容就講解結束啦！相信大家對傳送門的神奇之處也有了一定的了解，對 Suspense 的獨到之處也感受了一番。
vue3持續學習，更新永不停歇……
- 關注公眾號 星期一研究室 ，第一時間關注學習干貨，更多有趣的專欄待你解鎖~
- 如果這篇文章對你有用，記得 一鍵三連 再走哦~
- 我們下期見！🥂🥂🥂
總結
以上是生活随笔為你收集整理的vue3的传送门teleport究竟有多神奇？suspense发起异步请求有多简约？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 模块化妙用！用vue3实现一个鼠标追踪器
- 下一篇： html5倒计时秒杀怎么做,vue 设