课程名称：2022全面升级. Vue3 + TS 仿知乎专栏企业级项目

课程章节： 7-11 Loader 组件编码第一部分 - 基本实现，7-12 Loader 组件编码第二部分 - 使用 Teleport 进行改造

主讲老师：张轩

课程内容：

封装公共的Loader组件

课程收获：

我们封装loader的公共组件，正常情况下都会在最外层包裹着的。而这次我们封装的没有在最外层，如果不在最外层的话那么后期可能会造成一些影响。这个时候teleport就可以派上用场了，Vue 3.0 新增了一个内置组件 teleport ，主要是为了解决以下场景：

有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。

场景举例：一个 Button ，点击后呼出模态对话框

这个模态对话框的业务逻辑位置肯定是属于这个 Button ，但是按照 DOM 结构来看，模态对话框的实际位置应该在整个应用的中间

这样就有了一个问题：组件的逻辑位置和DOM位置不在一起

按照以前 Vue2 的做法，一般是使用 position: fixed; 等CSS属性强行把对话框定位到了应用的中间位置，属于没有办法的办法

而vue3则直接使用teleport标签，里面有一个属性to，to就直接指向一个标签，非常的简单方便，这样就没有必要浪费时间写样式了。