Telepot

弹窗一般参考的是当前的整个视口（fix 定位），而不是父容器。

• <Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
• 一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。 以弹窗为例，如果我们单纯使用 position: fixed 进行布局，但是一旦当该组件的祖先设置了 transform,perspective,filter 等属性时，此时元素将不会相对于整个窗口布局，而是根据其祖先容器的位置进行布局。（貌似是因为这些属性创建了一个新的堆叠上下文，导致组件排版基于的定位更改，以后再议） 此时可以通过使用 teleport 直接将该组件在真实 DOM 结构中传到 body 下，以避免出现堆叠上下文的问题，但这并不会影响到组件在项目中的逻辑结构。

<Teleport to="#modals">
  <!--支持各种选择器-->
  <div>A</div>
</Teleport>

Suspense

setup 语法糖本身是 async 修饰的。

• 底层使用插槽实现的
• 子组件存在异步任务（await），在等待数据返回过程中提示一些东西时使用

<Suspense>
  <!-- 具有深层异步依赖的组件 -->
  <Dashboard />
  <!-- 在 #fallback 插槽中显示 “正在加载中” -->
  <template #default>
    <child />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

全局组件

全局组件可以在任意地方使用而不需要进行 import

app.component('MyGlobalComponent', MyGlobalComponent);
//组件名称，配置对象，针对SFC

可以链式调用 component 方法：

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

• 未使用的全局组件在打包时不会被移除（tree-shaking）
• 组件依赖关系不明确

全局属性 app.config.globalProperties

为了通过 ts 的语法检查，需要生命一个接口：

declare module 'vue' {
  interface ComponentCustomProperties {
	x:number
  }
}

全局指令

• 指令就是 v-xxx 的状（attribute）

app.use

安装一个插件