Vue3渲染函数：如何通过组合式函数正确渲染并卸载确认弹窗

核心问题原因 #

你当前代码导致应用被清空的根本原因是：直接将弹窗渲染到了#app容器中，Vue的render函数默认会替换目标容器内的所有现有内容，而非追加。同时手动操作DOM卸载的方式不符合Vue组件生命周期管理规范，容易引发意外问题。

修复方案：正确实现渲染与卸载 #

关键改进点 #

1. 创建临时DOM容器挂载弹窗，避免直接操作#app容器
2. 使用Vuerender函数的标准卸载逻辑，而非手动删除DOM，确保组件资源被正确清理

修改后的完整代码 #

import { h, render } from 'vue'

export default function useConfirmationDialog() {
    const confirm = ({ title, description, callback }) => {
        // 创建临时容器，作为弹窗的挂载目标
        const tempContainer = document.createElement('div')
        const appContainer = document.getElementById('app')
        appContainer.appendChild(tempContainer)

        // 定义标准卸载逻辑：先清理Vue组件，再移除临时容器
        const unmount = () => {
            render(null, tempContainer)
            appContainer.removeChild(tempContainer)
        }

        // 构建弹窗虚拟DOM
        const popup = h(
            'div',
            { class: 'custom-popup-container' },
            [
                h('div', { class: 'custom-popup' }, [
                    h('div', { class: 'popup-header' }, [
                        h('h2', { class: 'popup-title' }, title),
                        h(
                            'a',
                            { class: 'popup-close', onClick: unmount },
                            [h('span', { class: 'icon-close' })]
                        ),
                    ]),
                    h('div', { class: 'popup-content' }, [
                        h('p', {}, description)
                    ]),
                    h('div', { class: 'pop-footer' }, [
                        h('div', { class: 'footer-btns' }, [
                            h(
                                'button',
                                { class: 'btn btn-lg btn-white', onClick: unmount },
                                'Cancel'
                            ),
                            h(
                                'button',
                                { 
                                    class: 'btn btn-lg btn-primary',
                                    onClick: () => {
                                        callback?.() // 兼容未传入callback的情况
                                        unmount()
                                    }
                                },
                                'Confirm'
                            ),
                        ])
                    ]),
                ])
            ]
        )

        // 渲染弹窗到临时容器
        render(popup, tempContainer)
    }

    return { confirm }
}

调用示例 #

在Vue组件中引入并使用：

<script setup>
import useConfirmationDialog from './hooks/useConfirmationDialog'

const { confirm } = useConfirmationDialog()

const triggerConfirm = () => {
    confirm({
        title: '确认操作',
        description: '此操作不可撤销，是否继续？',
        callback: () => {
            // 这里写确认后的业务逻辑
            console.log('执行确认操作')
        }
    })
}
</script>

<template>
    <button @click="triggerConfirm">触发确认弹窗</button>
</template>

组合式函数实现弹窗的思路优劣分析 #

优点 #

• 调用便捷：无需在模板中预先声明弹窗组件，通过函数直接触发，适合全局场景（如删除、提交确认）
• 逻辑内聚：弹窗的渲染、交互逻辑完全封装在组合式函数中，复用性强，多个组件可直接引入
• 轻量灵活：不需要注册全局组件，按需调用，减少不必要的组件挂载

缺点 #

• 维护成本高：通过h函数手动构建虚拟DOM，代码可读性远低于单文件组件，样式和结构修改麻烦
• 生命周期缺失：无法直接使用Vue的生命周期钩子，需要手动处理副作用清理，容易遗漏
• 调试难度大：动态创建的DOM在Vue Devtools中不易追踪，排查问题不如常规组件直观

内容的提问来源于stack exchange，提问作者Riza Khan