Vue2 与 Vue3 弹窗插件实现对比

Vue2 实现方案
通过 Vue.extend 动态创建组件实例，挂载到 DOM 节点。依赖 $mount 手动挂载，需自行管理销毁逻辑。事件通信通过 $emit 和 $on，需注意避免内存泄漏。

Vue3 实现方案
使用 createApp 和 h 函数创建弹窗实例，结合 Teleport 组件实现挂载目标控制。利用 Composition API 的 ref/reactive 管理状态，通过 provide/inject 跨层级通信。生命周期钩子调整为 setup 函数内使用。

核心代码差异示例

Vue2 动态挂载

const DialogConstructor = Vue.extend(DialogComponent)
const instance = new DialogConstructor({ propsData: options })
document.body.appendChild(instance.$mount().$el)

Vue3 组合式 API

const app = createApp({
  setup() {
    const state = reactive({ visible: false })
    const show = () => state.visible = true
    return { ...toRefs(state), show }
  },
  render: () => h(DialogComponent)
})
app.mount('#teleport-target')

插件与组件的用途差异

弹窗插件特性
全局注册后可通过 this.$dialog 调用，适合频繁触发的通用弹窗（如确认框、通知）。封装了挂载/销毁逻辑，支持动态传参，但灵活性较低。

组件化弹窗特性
通过模板引入，父子组件通信明确。适合复杂业务弹窗（如表单提交），可复用模板和样式，但需自行处理挂载位置和状态管理。

性能优化建议

• Vue2 应手动销毁实例避免内存泄漏
• Vue3 优先使用 Teleport 控制渲染位置
• 复杂弹窗考虑使用 v-if 替代 v-show 减少初始渲染开销
• 共用弹窗内容使用 keep-alive 缓存状态