作者：Michael Thiessen
译者：前端小智
起源：news
点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

对于 ve3 的一个新个性曾经探讨了一段时间了，那就是 Portals(传送门) ，它的性能是将模板HTML挪动到DOM不同中央的办法。Portals是React中的一个常见个性，Vue2 中能够应用portal-vue库。

Vue3 中，提供了 Teleport 来反对这一性能。

Teleport 的目标

我首先要理解的是何时应用 Teleport 性能。

在解决较大的Vue我的项目时，有逻辑解决组织代码库是很重要的。 然而，当解决某些类型的组件（如模式，告诉或提醒）时，模板HTML的逻辑可能位于与咱们心愿渲染元素的地位不同的文件中。

实际上，在很多时候，与咱们的Vue应用程序的DOM齐全离开解决时，这些元素的治理要容易得多。 所有这些都是因为解决嵌套组件的地位，z-index和款式可能因为解决其所有父对象的范畴而变得辣手。

这种状况就是 Teleport 派上用场的中央。 咱们能够在逻辑所在的组件中编写模板代码，这意味着咱们能够应用组件的数据或 props。 然而，而后齐全将其渲染到咱们Vue应用程序的范畴之外。

如果不应用 Teleport，咱们将不得不放心从子组件向DOM树传递逻辑的事件流传，但当初要简略得多。

Vue Teleport 是如何工作的

假如咱们有一些子组件，咱们想在其中触发弹出的告诉。 正如方才所探讨的，如果将告诉以齐全独立的DOM树渲染，而不是Vue的根#app元素，则更为简略。

咱们要做的第一件事是关上咱们的index.html，并在</body>之前增加一个<div>。

// index.html<body>   <div id="app"></div>   <div id='portal-target'></div></body>

接下来，创立触发要渲染的告诉的组件。

// VuePortals.vue<template>  <div class='portals'>    <button @click='showNotification'> Trigger Notification! </button>    <teleport to='#portal-target'>      <div v-if="isOpen" class='notification'>        This is rendering outside of this child component!      </div>    </teleport>  </div></template><script>import { ref } from 'vue'export default {  setup () {    const isOpen = ref(false)    var closePopup    const showNotification = () => {      isOpen.value = true      clearTimeout(closePopup)      closePopup = setTimeout(() => {        isOpen.value = false      }, 2000)    }    return {      isOpen,      showNotification    }  }}</script><style scoped>  .notification {    font-family: myriad-pro, sans-serif;    position: fixed;    bottom: 20px;    left: 20px;    width: 300px;    padding: 30px;    background-color: #fff;  }</style>

在此代码段中，当按下按钮时，将渲染2秒钟的告诉。 然而，咱们的次要指标是应用Teleport获取告诉以在咱们的Vue应用程序内部渲染。

如你所见，Teleport具备一个必填属性- to

to 须要 prop，必须是无效的查问选择器或 HTMLElement (如果在浏览器环境中应用)。指定将在其中挪动 <teleport> 内容的指标元素

因为咱们在#portal-target中传递了代码，因而 Vue会找到蕴含在index.html中的#portal-target div，它会把 Teleport 内的所有代码渲染到该div中。

上面是运行的后果：

查看元素和查看DOM能够分明地晓得产生了什么。

咱们能够应用VuePortals组件中的所有逻辑，然而通知咱们的我的项目在其余中央渲染该模板代码！

总结

以上就是Vue Teleport的根本介绍。 在不久的未来，前面会介绍一些更高级的用例，明天这篇开始应用此炫酷性能开始！

无关更深刻的教程，查看Vue3文档。

~完，我是刷碗智，我要去刷晚了，骨得白！

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文： https://learn.co/2020/09/an-i...

交换

文章每周继续更新，能够微信搜寻「 大迁世界 」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。