alert()在调用时立即弹出并阻塞脚本执行和页面交互，应绑定用户操作而非无条件触发；它无返回值、不支持样式定制，仅适用于调试，生产环境须用自定义弹窗替代。
直接用 alert() 就能弹出，但别在页面加载时无条件调用
浏览器原生的警告框只能通过 JavaScript 的 alert() 函数触发，它会阻塞后续脚本执行，并暂停页面交互。常见错误是把 alert("Hello") 写在 HTML 的 <script></script> 标签最外层——这会导致每次刷新页面就弹一次，用户无法操作。
实际使用中，应该把它绑定到用户动作上，比如按钮点击：
<button onclick="alert('提交成功！')">提交</button>
或者更规范地写在事件监听里：
document.getElementById('myBtn').addEventListener('click', () => {
alert('数据已保存');
});
- 不要在
window.onload或DOMContentLoaded里直接调用alert()，除非你明确需要强制中断流程（极少见） -
alert()不支持换行符\n在所有移动端 Safari 上会被忽略，想换行得用\u2028（行分隔符），但兼容性差，建议避免 - 它没有返回值，也不能自定义按钮文字或样式，纯属调试或临时提示用
alert() 和 confirm()、prompt() 的核心区别在哪
这三个都是模态对话框，但行为和用途完全不同：
-
alert()：只显示消息，只有一个“确定”按钮，返回值恒为undefined -
confirm()：显示消息 + “确定/取消”，返回true或false，适合确认类操作，比如删除前二次确认 -
prompt()：带输入框，返回用户输入的字符串（或null如果用户点了取消），但现代项目基本弃用，因为无法控制样式且移动端体验极差
示例对比：
const isSure = confirm("确定要删除这条记录？"); // 返回 true/false
if (isSure) { deleteRecord(); }
const name = prompt("请输入姓名："); // 返回字符串或 null
if (name !== null) { saveName(name); }
注意：prompt() 在 Chrome 94+ 已默认禁用在跨域 iframe 中调用，且多数现代 UI 框架（如 Element Plus、Ant Design）都提供可定制的替代组件，不推荐在生产环境用原生 prompt()。
为什么 Vue/React 项目里几乎看不到 alert()
不是不能用，而是它和现代前端框架的响应式逻辑天然冲突：
- 它打断渲染流程，Vue 的响应式更新或 React 的状态 setState 可能被卡住或延迟触发
- 它无法被组件生命周期控制，比如你在
useEffect里调用alert()，可能在组件已卸载后才弹出，造成内存泄漏隐患 - 它不支持主题、图标、按钮文案定制，和统一 UI 规范格格不入
正确做法是用轻量级 UI 库的对话框封装，例如：
// Ant Design React
Modal.info({ title: '操作成功', content: '数据已同步至服务器' });
// Element Plus（Vue 3）
ElMessage.success('上传完成');
如果只是临时调试，alert() 仍可用；但只要涉及用户可见提示，就得走 UI 组件链路——否则上线后会被设计和测试反复打回。
移动端弹 alert() 的几个现实问题
iOS Safari 对原生对话框限制最多，Android 各厂商 WebView 表现也不一致：
- 微信内置浏览器（X5 内核）会拦截连续多次
alert()，第二次起静默丢弃 - Safari 在 PWA 模式下可能完全禁用
alert()，尤其当页面已添加到主屏幕 - 部分 Android 厂商定制系统（如华为 EMUI）会把
alert()转成 Toast 弹窗，文字截断严重 - 弹窗期间若用户切到其他 App，再切回来，对话框可能消失或卡死
所以，凡是有真实用户触达需求的提示（比如表单校验失败、网络异常），必须用 DOM 渲染的浮层方案，哪怕只是简单加个 真正难的不是怎么弹出来，是怎么确保它在各种上下文里不崩、不卡、不被拦截，还让用户看得清、关得掉。... 配 CSS 动画。原生 alert() 只保留给开发阶段快速验证逻辑分支。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
