<p>Toast 实例必须手动初始化，data-bs-toggle 不生效；需用 bootstrap.Toast.getOrCreateInstance 获取实例并调用 show()，配置优先级为 JS 对象 > data-* 属性 > 默认值，隐藏后需监听 hidden.bs.toast 事件手动移除 DOM。</p>
Toast 实例必须手动初始化，data-bs-toggle 不生效
Bootstrap 5 的 Toast 不再自动绑定 DOM 元素，哪怕你写了 data-bs-toggle="toast"，不调 JS 初始化就完全没反应。这是和 v4 最大的区别，也是新手踩坑最多的地方。
正确做法是先选中元素，再用 bootstrap.Toast 构造函数实例化：
const toastEl = document.getElementById('myToast');
const toast = new bootstrap.Toast(toastEl); // 必须这一步
toast.show();- 必须等 DOM 加载完成后再执行（比如放在
DOMContentLoaded里或<script>放在 body 底部） -
toastEl不能是null，检查 ID 是否拼错、元素是否真存在 - 重复初始化会报错：
Cannot initialize twice a bootstrap toast，建议加个判断或用getOrCreateInstance
getOrCreateInstance 是更安全的获取方式
避免重复初始化或手动判空，推荐直接用静态方法 bootstrap.Toast.getOrCreateInstance，它会返回已有实例或新建一个：
const toast = bootstrap.Toast.getOrCreateInstance(
document.getElementById('myToast')
);
toast.show();- 适用于动态插入的 Toast（比如 AJAX 成功后插入再触发），不用关心是否已初始化
- 参数可以是 DOM 元素，也可以是选择器字符串（如
'#myToast'），但后者要求元素已存在于 DOM 中 - 如果传入的元素没有
data-bs-delay等属性，实例仍会读取默认值；但显式传配置对象会覆盖 HTML 属性
配置项优先级：JS 对象 > data-* 属性 > 默认值
Toast 的行为（比如延迟、动画）可以通过三种方式设置，优先级从高到低：
立即学习“Java免费学习笔记（深入）”；
- JS 初始化时传入的配置对象（最高）
- 元素上的
data-bs-*属性（如data-bs-delay="2000"） - Bootstrap 内置默认值（
delay: 5000,animation: true）
例如，想让某个 Toast 永不自动关闭，且禁用淡入动画：
bootstrap.Toast.getOrCreateInstance(document.getElementById('myToast'), {
delay: 0,
animation: false
}).show();注意：delay: 0 表示不自动隐藏，但用户仍可点击关闭按钮（如果启用了 data-bs-autohide="false" 或配置 autohide: false）。
关闭 Toast 后 DOM 不自动移除，需手动清理
调用 toast.hide() 或用户点击关闭按钮后，Toast 元素只是被加上 .hide 类并设 display: none，DOM 节点依然留在页面里。频繁弹 Toast 又不清理，会导致内存堆积、事件监听器残留。
- 监听
hidden.bs.toast事件，在隐藏完成后再移除元素：
toastEl.addEventListener('hidden.bs.toast', () => {
toastEl.remove(); // 或 toastEl.parentNode.removeChild(toastEl)
});- 如果 Toast 是模板生成的（比如用
document.createElement），记得在remove()前解绑自定义事件或清除定时器 - 别依赖
toast.dispose()来清理 DOM —— 它只销毁实例，不操作节点
最麻烦的是嵌套在 Vue/React 组件里的 Toast，DOM 生命周期和框架不一致，容易出现「Toast 关了但节点还在」或「节点删了但实例还试图触发动画」—— 这时候得靠框架的 ref 和 effect 清理逻辑兜底。
