MutationObserver 是异步监听 DOM 变化的原生 API，支持监听子节点增删、属性变更、文本内容变化等，需配置 options 并调用 observe() 启用；变动批量异步派发，须手动 disconnect() 清理以防内存泄漏。
MutationObserver 是 JavaScript 中用于异步监听 DOM 树变化的原生 API，它取代了已废弃的 DOMSubtreeModified 等旧式事件，性能更好、控制更精细。
监控什么变动？——核心观察类型
通过配置 options 对象，可指定监听以下几类变动：
- childList：子节点增删（包括文本节点）
-
attributes：元素属性值变更（如
class、style、自定义属性） -
characterData：文本节点内容变化（需配合
subtree: true或直接观察文本节点） - subtree：是否递归监听后代节点（影响 childList 和 attributes 的作用范围）
-
attributeFilter：只监听指定属性名（如
['class', 'data-id']） - attributeOldValue：记录属性变更前的值（需显式开启）
- characterDataOldValue：同理，用于文本节点旧值
如何正确创建和启用观察者？
实例化后需调用 observe() 方法绑定目标节点与配置，且一个 observer 只能观察一个根节点（但可通过 subtree: true 覆盖其后代）：
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
console.log('新增节点:', mutation.addedNodes);
console.log('移除节点:', mutation.removedNodes);
}
if (mutation.type === 'attributes') {
console.log('属性变更:', mutation.attributeName);
console.log('旧值:', mutation.oldValue);
}
});
});
// 观察 body 下所有动态变化（含后代）
observer.observe(document.body, {
childList: true,
attributes: true,
subtree: true,
attributeOldValue: true
});
变动是批量异步派发的
MutationObserver 的回调不会在每次 DOM 修改后立刻执行，而是等当前 JS 执行栈清空、浏览器完成一次渲染更新后，将**同一事件循环内发生的多个变动合并为一批 mutations**统一通知。这避免了频繁触发带来的性能问题。
立即学习“Java免费学习笔记（深入）”；
这意味着：
- 连续 5 次
appendChild()可能只触发一次回调，mutations数组包含 5 条记录 - 无法像事件那样阻止默认行为或冒泡（它不是事件）
- 若需立即响应，不能依赖它；应结合业务逻辑主动触发（如封装操作函数）
记得适时停止和清理
Observer 不会自动销毁，长期运行可能引发内存泄漏或重复处理：
- 用
observer.disconnect()暂停监听（可后续用observe()恢复） - 用
observer.takeRecords()清空待处理队列（通常用于断开前手动消费剩余 mutations） - 在组件卸载、模块销毁时务必调用
disconnect()（例如 React useEffect cleanup、Vue unmounted 钩子）
