用 Vue3.0 写过组件吗？如果想实现一个 Modal 你会怎么设计？

1. 组件设计

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式。

现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同。

这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可。这样，下次开发相同界面程序时就可以写更少的代码，意味着更高的开发效率、更少的 bug 和更少的程序体积。

主体内容需要灵活，所以可以是字符串，也可以是一段 html 代码。
特点是它们在当前 vue 实例之外独立存在，通常挂载于 body 之上。
除了通过引入 import 的形式，我们还可通过 API 的形式进行组件的调用。
还可以包括配置全局样式、国际化、与 TypeScript 结合。

3. 实现流程

目录结构

Modal 组件相关的目录结构：

├── plugins
│   └── modal
│       ├── Content.tsx       // 维护 Modal 的内容，用于 h 函数和 jsx 语法
│       ├── Modal.vue         // 基础组件
│       ├── config.ts         // 全局默认配置
│       ├── index.ts          // 入口
│       ├── locale            // 国际化相关
│       │   ├── index.ts
│       │   └── lang
│       │       ├── en-US.ts
│       │       ├── zh-CN.ts
│       │       └── zh-TW.ts
│       └── modal.type.ts     // ts 类型声明相关

因为 Modal 会被 app.use(Modal) 调用作为一个插件，所以都放在 plugins 目录下。

<Teleport to="body" :disabled="!isTeleport">
  <div v-if="modelValue" class="modal">
    <div
      class="mask"
      :style="style"
      @click="maskClose && !loading && handleCancel()"
    ></div>
    <div class="modal__main">
      <div class="modal__title line line--b">
        <span>{{ title || t('r.title') }}</span>
        <span
          v-if="close"
          :title="t('r.close')"
          class="close"
          @click="!loading && handleCancel()"
        >✕</span>
      </div>
      <div class="modal__content">
        <Content v-if="typeof content === 'function'" :render="content" />
        <slot v-else>
          {{ content }}
        </slot>
      </div>
      <div class="modal__btns line line--t">
        <button :disabled="loading" @click="handleConfirm">
          <span class="loading" v-if="loading">❍</span>
          {{ t('r.confirm') }}
        </button>
        <button @click="!loading && handleCancel()">
          {{ t('r.cancel') }}
        </button>
      </div>
    </div>
  </div>
</Teleport>

最外层通过 Vue 3 Teleport 内置组件进行包裹，其相当于传送门，将里面的内容传送至 body 之上。从 DOM 结构上看，把 modal 该有的内容（遮罩层、标题、内容、底部按钮）都实现了。

关于主体内容

<div class="modal__content">
  <Content v-if="typeof content === 'function'" :render="content" />
  <slot v-else>
    {{ content }}
  </slot>
</div>

可以看到根据传入 content 的类型不同，对应显示不同的内容。

实现 API 形式

组件如何实现 API 形式调用 Modal 组件呢？

在 Vue 2 中，我们可以借助 Vue 实例以及 Vue.extend 的方式获得组件实例，然后挂载到 body 上：

import Modal from './Modal.vue'
const ComponentClass = Vue.extend(Modal)
const instance = new ComponentClass({ el: document.createElement('div') })
document.body.appendChild(instance.$el)

Vue 3 移除了 Vue.extend 方法，但可以通过 createVNode 实现：

import Modal from './Modal.vue'
import { createVNode, render } from 'vue'

const container = document.createElement('div')
const vnode = createVNode(Modal)
render(vnode, container)
const instance = vnode.component
document.body.appendChild(container)