Vue 3 中直接调用 window.alert 是错误起点，会导致 SSR 报错、阻塞线程、样式不可控；应封装支持 v-model:visible、插槽内容、Esc/遮罩关闭及 onBeforeUnmount 清理的 AlertModal 组件。

Vue 3 中用 window.alert 就是错的起点

直接在 Vue 组件里调用 window.alert 看似简单，实则破坏响应式、阻塞主线程、无法定制样式，且在 SSR（如 Nuxt）中会报 ReferenceError: window is not defined。这不是“能用就行”，而是埋了三个雷：服务端渲染失败、UI 不可控、交互体验僵硬。

真正该做的，是封装一个可复用、可关闭、能响应数据变化的轻量提示组件，而不是包装一层 alert。

封装 AlertModal 组件的关键三件事

它不是弹窗库的替代品，而是解决“临时确认/提示”这类高频低复杂度场景。重点不在炫技，而在不侵入业务逻辑、不强制状态管理、不依赖第三方。

• 用 v-model:visible 双向绑定控制显隐，符合 Vue 3 通用习惯，父组件只需传 :visible.sync 或用 v-model
• 内容通过 default 插槽注入，避免字符串拼接 HTML，支持内嵌 、变量插值 和简单指令
• 点击遮罩或按 Esc 自动关闭，但必须加 @click.self 防止点到弹窗内部误关 —— 这是最多人漏掉的细节

<alertmodal v-model:visible="showAlert"><p>你确定要删除 <strong>{{ itemName }}</strong> 吗？</p>
</alertmodal>

onBeforeUnmount 里清理定时器和事件监听器

如果组件内部用了 setTimeout 自动关闭，或 keydown 监听 Esc，卸载时没清理就会导致内存泄漏或触发已销毁组件的回调 —— 表现为控制台报 Cannot read property 'xxx' of null，尤其在路由跳转后还弹出旧提示。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

正确做法是在 onBeforeUnmount 中统一清除：

• 保存 setTimeout 的返回值，用 clearTimeout 清掉
• 用 addEventListener 绑定的 keydown，必须配对调用 removeEventListener
• 不要依赖 v-if 切换就万事大吉 —— v-if=false 时组件已卸载，但监听器可能还在

不推荐用 Teleport 到 body 的真实原因

很多教程一上来就用 把弹窗挂到 document 根节点，理由是“脱离父级样式污染”。但实际项目中，90% 的警告对话框根本不需要这个层级穿透能力 —— 它们只在当前业务模块内使用，且父容器已设好 position: relative 和 z-index。

硬套 Teleport 带来两个麻烦：

• 样式调试变困难：浏览器开发者工具里找不到组件对应的真实 DOM 位置
• 焦点管理失控：关闭后焦点没回到触发按钮上，用户按 Tab 会跳过关键操作入口
• 如果父组件用了 overflow: hidden（比如抽屉、卡片），反而需要 Teleport；但这是例外，不是默认路径

先让组件在局部正常工作，再根据具体布局问题决定是否提升挂载点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！