bootstrap 5 统一使用 dispose() 方法销毁 js 插件实例，清除事件监听器、定时器和数据属性；不调用会导致内存泄漏或交互错乱，且不移除 dom 元素本身。
bootstrap 5 的 dispose() 方法是唯一标准销毁方式
bootstrap 5 起，所有 js 插件（如 modal、dropdown、tooltip）都统一提供 dispose() 实例方法，用于彻底清除事件监听器、定时器和数据属性。不调用它，组件 dom 虽在，但 js 行为可能残留（比如重复绑定 click 事件），尤其在动态增删元素时容易引发内存泄漏或交互错乱。
必须先通过 getOrCreateInstance() 或构造函数拿到实例，再调用：
const myModal = bootstrap.Modal.getOrCreateInstance('#my-modal');
myModal.dispose(); // ✅ 正确销毁
注意：dispose() 不会移除 DOM 元素本身，只解绑 JS 功能；也不能对已销毁的实例重复调用，否则抛出 TypeError: Cannot read properties of null。
Bootstrap 4 没有 dispose()，得手动清理或重置
Bootstrap 4 的插件（如 $.fn.modal.Constructor）不暴露销毁接口。常见“伪销毁”做法是调用 hide() + 清空内容，但这只是视觉隐藏，底层事件监听仍在。
真正安全的做法只有两种：
- 用
$(element).removeData('bs.modal')手动删掉 jQuery 数据缓存（适用于 modal、tooltip 等依赖.data()存储实例的插件） - 直接从 DOM 移除整个元素（
element.remove()），避免残留状态 - 若需复用元素，可在销毁前用
$(element).off()卸载所有命名空间事件（如click.bs.modal），但需知道具体事件名，否则易漏
例如移除 tooltip 的 JS 行为：
$('#my-tooltip').tooltip('dispose'); // ❌ Bootstrap 4 不支持
$('#my-tooltip').tooltip('hide').off('.tooltip'); // ✅ 退而求其次
销毁后再次初始化要检查 DOM 是否还存在
调用 dispose() 后，实例对象仍存在，但内部引用（如 this._element）可能被设为 null。此时若直接用同一 DOM 元素再次 new 实例，Bootstrap 5 会自动重建，但前提是该元素没被移除。
容易踩的坑：
- 销毁后又用
document.getElementById()查找，但元素已被remove()—— 返回null，后续new bootstrap.Modal(null)报错 - 多个 JS 模块共用一个 DOM 节点，A 模块销毁了，B 模块还在读取
data-bs-*属性，导致行为异常 - 使用
data-bs-toggle="modal"触发的自动初始化，销毁后点击按钮仍会触发新实例——因为 data 属性没清，得手动element.removeAttribute('data-bs-toggle')
Vue/React 中集成时，销毁时机比方法更重要
在框架中，不能只关注“怎么销毁”，更要确保“什么时候销毁”。比如 Vue 的 onBeforeUnmount 或 React 的 useEffect cleanup 函数里调用 dispose()，否则组件卸载后插件还在监听全局事件（如 resize、keydown）。
典型错误写法：
onMounted(() => {
const tooltip = new bootstrap.Tooltip(el);
// 忘记保存引用，也没在卸载时 dispose → 内存泄漏
});
正确做法是保留引用并在生命周期结束时清理：
let tooltip;
onMounted(() => {
tooltip = new bootstrap.Tooltip(el);
});
onBeforeUnmount(() => {
tooltip?.dispose(); // ✅ 安全调用，可选链防报错
});
复杂点在于：如果组件内嵌多个 Bootstrap 插件，每个都要单独管理实例引用；且 dispose() 是同步阻塞操作，大量组件同时销毁时可能影响响应速度。
