广州顺德网站设计,wordpress 更改目录权限,做系统后之前网站怎么找回,nas做网站一文讲解vue3的Teleport和Suspense一、#x1f44b;用teleport实现打开模态框操作1、teleport是什么2、实现模态框功能#xff08;1#xff09;设置锚点#xff08;2#xff09;定义子组件#xff08;3#xff09;定义父组件二、#x1f91a;用Suspense1、Suspense是什… 一文讲解vue3的Teleport和Suspense一、用teleport实现打开模态框操作1、teleport是什么2、实现模态框功能1设置锚点2定义子组件3定义父组件二、用Suspense1、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 设置一个锚点来放置组件的内容。具体代码如下
bodynoscriptstrongWere sorry but % htmlWebpackPlugin.options.title % doesnt work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv idapp/div//先行定义一个锚点div idmodal/div!-- built files will be auto injected --/body2定义子组件
接下来我们在 /src/components 下定义一个子组件命名为 Modal.vue 。具体代码如下
templateteleport to#modaldiv idcenter v-ifisOpenh2slotthis is a modal/slot/h2button classbtn2 clickbuttonClickClose/button/div/teleport
/templatescript
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}}
})
/scriptstyle
#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;
}
/style3定义父组件
之后我们再来定义一个父组件命名为 index.vue 。具体代码如下
templatebutton classbtn1 clickopenModal打开模态框/buttonmodal :isOpenmodalIsOpen close-modalonModalCloseMy Modal!!!/modal
/templatescript langts
import { ref, defineComponent} from vue
import Modal from ./components/Modal.vueexport 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}}
});
/scriptstyle
#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 具体代码如下
templateh1{{result}}/h1
/template
script langts
import { defineComponent } from vue
export default defineComponent({setup() {//使用Suspense需要返回一个对象return new Promise((resolve) {setTimeout(() {return resolve({result: 10000})}, 3000)})}
})
/script
之后在项目下再定义一个父组件命名为 DogShow.vue 具体代码如下
templatediv idappSuspensetemplate #defaultasync-show //templatetemplate #fallbackh1Loading !.../h1/template/Suspense/div
/templatescript langts
import { defineComponent } from vue
import AsyncShow from ./components/AsyncShow.vueexport default defineComponent({name: App,components: {AsyncShow,},setup() {}
});
/scriptstyle
#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 具体代码如下
templateimg :srcresult result.message
/template
script langts
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接下来我们再把以上子组件的内容添加到父组件中具体代码如下
templatediv idappSuspensetemplate #defaultasync-show /dog-show /template #fallbackh1Loading !.../h1/template/Suspense/div
/templatescript langts
import AsyncShow from ./components/AsyncShow.vue
import DogShow from ./components/DogShow.vueexport default {name: App,components: {AsyncShow,DogShow},setup() {}
};
/scriptstyle
#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 进行改造具体代码如下
templatediv idappp{{error}}/pSuspensetemplate #defaultasync-show /dog-show /template #fallbackh1Loading !.../h1/template/Suspense/div
/templatescript langts
import { onErrorCaptured } from vue
import AsyncShow from ./components/AsyncShow.vue
import DogShow from ./components/DogShow.vueexport default {name: App,components: {AsyncShow,DogShow},setup() {const error ref(null)onErrorCaptured((e: any) {error.value ereturn true})return{error}}
};
/scriptstyle
#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持续学习更新永不停歇…… 关注公众号 星期一研究室 第一时间关注学习干货更多有趣的专栏待你解锁~如果这篇文章对你有用记得 一键三连 再走哦~我们下期见
