详解Vue新增内置组件的使用详解Vue新增内置组件的使用

一、Teleport

1.1 Teleport 介绍
1.2 使用 Teleport
1.3 预览效果

二、Suspense

2.1 介绍 Suspense
2.2 使用 Suspense
2.3 预览效果

总结

一、Teleport Teleport 官方文档

1.1 Teleport 介绍
1.Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建我们的 UI。我们可以将它们相互嵌套以构建构成应用程序 UI 的树。
2.但是，有时组件模板的一部分在逻辑上属于该组件，而从技术角度来看，最好将模板的这部分移动到 DOM 中的其他位置，即 Vue 应用程序之外。
上面的话是不是看起来很懵逼，其实是翻译自官方文档

其实我理解的 Teleport 就是将一个组件挂载在 Vue app 之外，我们知道，Vue 属于 SPA（单页面）应用。所有的渲染都在 id 为 app 的标签里面，这样的话，我们就创建一个和 app 是同级的组件，并且通过 teleport 标签引用，就可以任意页面使用了

1.2 使用 Teleport
1.我们这里也是实现一个全局模态框
2.通过父子组件通信机制，来使用 teleport 的挂载的特性

Vite App - 锐客网

定义一个 Modal 组件

#center {width: 200px; height: 200px; border: 2px solid black; background-color: white; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }

3.使用 Modal 组件

#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; }

1.3 预览效果

文章图片

二、Suspense Suspense 官方文档

Waring：作为 Vue3 中实验性的功能，随时都有可能修改，所以不建议用于生成环境的应用

2.1 介绍 Suspense
【详解Vue新增内置组件的使用】是可以用来异步数据，它拥有一个本地的处理方法用来适配多种情形提供了二选一（加载完成和失败的插槽）
更详细的内容大家可以自行翻阅官方文档，我只是进行一部分的挑选

2.2 使用 Suspense
1.为了实现异步效果，我们可以使用 Promise 来实现异步操作。
2.我们定义如下组件 AsyncShow.vue 组件

3.在 App.vue 里面使用该组件

#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; }

2.3 预览效果