vue3中的Fragment、Teleport、Suspense新组件

Fragment组件

· 在Vue2中: 组件必须有一个根标签

· 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

· 好处: 减少标签层级, 减小内存占用

Fragment显示效果:

vue3中的Fragment、Teleport、Suspense新组件_第1张图片

Teleport组件:

· Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签下插入显示

to 允许接收值:

期望接收一个 CSS 选择器字符串或者一个真实的 DOM 节点。

提示:

挂载时,传送的 to 目标必须已经存在于 DOM 中。理想情况下,这应该是整个 Vue 应用 DOM 树外部的一个元素。

如果目标元素也是由 Vue 渲染的,你需要确保在挂载 之前先挂载该元素。





初始页面:

vue3中的Fragment、Teleport、Suspense新组件_第2张图片

点击打开弹窗:

vue3中的Fragment、Teleport、Suspense新组件_第3张图片

可以看到弹窗的html内容插入在body标签下了

Suspense组件

· 它们允许我们的应用程序在等待异步组件时渲染一些后备内容,可以让我们创建一个平滑的用户体验。

defineAsyncComponent:

Vue3的defineAsyncComponent函数为我们提供了一个轻松且高效的方式来加载组件。

它允许我们使用异步方式来加载组件,从而提高我们应用程序的性能。

我们只需要将定义组件的过程与组件注册解耦,即可实现异步加载组件。

对于大型和复杂的Vue应用程序,异步加载组件是一个非常优秀的策略,

它可以显著提高应用程序的性能。

父组件代码:



AsyncComp子组件:



AsyncAddress子组件:



初始页面显示》加载中:

vue3中的Fragment、Teleport、Suspense新组件_第4张图片

5秒后页面加载完成-才同步显示两个子组件:

vue3中的Fragment、Teleport、Suspense新组件_第5张图片

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

你可能感兴趣的:(vue相关语法,前端框架,vue.js,vue,html,typescript,前端,es6)