应使用 mutationobserver 替代已废弃的 domnodeinserted 等事件；它异步批量处理变化，需配置 childlist 或 attributes 等选项，并注意 disconnect 避免内存泄漏。
监听DOM新增或删除节点时，用 MutationObserver 而不是 DOMNodeInserted
旧式事件如 DOMNodeInserted 和 DOMNodeRemoved 已被废弃，现代浏览器中无法触发，强行绑定也不会报错但完全无效。必须用 MutationObserver 替代。
它不是事件，而是一个异步观察器：变化发生后批量收集、延迟回调，类似 Promise.then 的微任务时机。
- 只监听已挂载的 DOM 节点，对未插入文档的 fragment 无效
- 观察器启动后才开始捕获变化，之前的变化不会回溯
- 回调函数接收的是
MutationRecord[]数组，每个记录含type（"childList"/"attributes"/"characterData"）、addedNodes、removedNodes等字段
监听子节点增删：配置 { childList: true } 就够了
这是最常见需求，比如监听某个容器内是否动态插入了按钮或列表项。注意默认不递归，只看直接子元素。
const target = document.getElementById('list');
const observer = new MutationObserver(records => {
records.forEach(record => {
record.addedNodes.forEach(node => {
if (node.nodeType === 1 && node.classList.contains('item')) {
console.log('新 item 已插入', node);
}
});
});
});
observer.observe(target, { childList: true });
- 如果要监听后代所有层级（比如嵌套卡片里的按钮），加
subtree: true -
childList: true时，addedNodes和removedNodes是NodeList，需遍历判断nodeType（1=元素，3=文本） - 不要在回调里直接调用
observer.disconnect()后又立刻observe()，容易漏掉连续变化
监听属性变化：必须显式指定 attributes: true 和目标属性
MutationObserver 默认不监听任何属性，连 class 或 style 都不会捕获，除非明确声明。
- 监听所有属性：
{ attributes: true } - 只监听特定属性（性能更好）：
{ attributes: true, attributeFilter: ['class', 'data-status'] } - 想看到旧值？加
attributeOldValue: true，否则oldValue为undefined -
attributes和childList可同时启用，互不干扰
示例：监听按钮是否被禁用
observer.observe(button, {
attributes: true,
attributeFilter: ['disabled'],
attributeOldValue: true
});
// 回调中可对比：
if (record.attributeName === 'disabled' && record.oldValue === null && record.target.hasAttribute('disabled')) {
console.log('按钮刚被禁用');
}
避免内存泄漏和重复观察：记得手动 disconnect() 和复用实例
MutationObserver 实例会持续持有对目标节点的引用，若目标节点被移除但观察器没停，就可能造成内存泄漏——尤其在单页应用反复渲染组件时。
- 组件卸载前务必调用
observer.disconnect() - 不需要频繁新建实例：同一个
MutationObserver可多次observe()不同目标（先disconnect()再 observe 新目标） - 不要在每次
setState或render里新建 observer，应缓存实例并按需启停 - 调试时可用
console.log(observer.takeRecords())查看已排队但未派发的记录（清空队列）
真正容易被忽略的是：观察器回调执行期间发生的 DOM 变化，仍会被捕获并合并到下一轮回调——它不阻塞渲染，也不保证“立即响应”，而是等当前 JS 栈清空后统一派发。如果你需要精确到毫秒级响应，它不适合；但对绝大多数 UI 同步场景，这反而是更稳定的设计。
