MutationObserver 是监听 DOM 变化的标准高效方案，支持子节点、属性、文本变更等精准捕获，需配置 options 并调用 observe() 启动，回调中遍历 mutationsList 按 type 处理，注意 disconnect 释放资源并避免修改监听 DOM 引发循环。
MutationObserver 是 JavaScript 中监听 DOM 结构变化最高效、标准的方式，它取代了已废弃的 DOMSubtreeModified 等旧事件，能精准捕获新增、删除、属性修改、文本内容变更等操作，且性能可控、支持批量回调。
基本用法：创建并启动观察器
你需要先创建一个 MutationObserver 实例，传入一个回调函数；然后调用 observe() 方法指定目标节点和观察选项：
- 回调函数接收两个参数：
mutationsList（变动记录数组）和observer（当前观察器实例） -
observe(target, options)中的target是要监听的 DOM 节点（如document.body或某个容器） -
options是配置对象，必须至少设置一项：如childList: true（监听子节点增删）、attributes: true（监听属性变化）、characterData: true（监听文本内容变化）
常用观察选项与对应触发场景
不同选项组合决定监听范围，常见搭配如下：
-
{ childList: true }：监听直接子元素的添加或移除（不含深层嵌套） -
{ childList: true, subtree: true }：监听目标及其所有后代节点的子元素变化（推荐用于动态组件挂载检测） -
{ attributes: true }：监听目标节点自身属性（如class、id、style）的变化 -
{ attributes: true, attributeFilter: ['class', 'data-id'] }：只监听指定属性名的变更 -
{ characterData: true, subtree: true }：监听任意后代文本节点的内容变化（如textContent更新）
处理变动记录：解析 mutationsList
每次触发回调时，mutationsList 包含多个 MutationRecord 对象，每个对象有以下关键属性：
立即学习“Java免费学习笔记（深入）”；
-
type：变动类型，值为"childList"、"attributes"或"characterData" -
target：发生变动的节点（注意：不一定是你 observe 的那个根节点） -
addedNodes/removedNodes：NodeList，包含新增或删除的节点（仅childList类型有效） -
attributeName：被修改的属性名（仅attributes类型有效） -
oldValue：若配置了attributeOldValue: true或characterDataOldValue: true，则可获取旧值
建议在回调中遍历 mutationsList 并按 type 分类处理，避免遗漏或重复响应。
注意事项与最佳实践
MutationObserver 不是“实时”触发，而是异步批量执行（类似微任务），因此适合做聚合响应。使用时需注意：
- 观察器默认不会自动停止，记得在不需要时调用
observer.disconnect()释放资源（例如组件卸载时） - 若需重新监听，调用
observer.observe()即可，无需新建实例 - 避免在回调中直接修改被监听的 DOM，否则可能引发无限循环（可加防抖或标记位控制）
- 监听
document全局变化开销较大，应尽量缩小target范围，比如只监听某个 id 容器
