MutationObserver 需精准配置、时机把控和资源节制：目标节点须真实挂载，避免监听 document；options 必须显式启用变化类型；回调中处理快照需缓存节点、延迟读布局、加守卫防循环；组件卸载时必须主动 disconnect。
MutationObserver 在复杂应用中不是“监听即生效”的万能开关，而是需要精准配置、时机把控和资源节制的精细工具。它真正高效的地方，不在于监听得多，而在于监听得准、响应得稳、收手得及时。
目标节点必须真实挂载，不能是“影子”
常见错误是在 Vue 的 setup 或 React 的 useEffect(() => {}, []) 中直接查 document.getElementById，此时 DOM 尚未渲染，target 为 null，observe 就完全静默。必须确认节点已插入文档树：
- 加
console.log(target, target?.nodeType)，输出应为类似<div id="app"></div>且nodeType === 1 - 动态创建的元素（如
document.createElement('section')）要先appendChild()或insertAdjacentElement()到真实 DOM，再调用observe() - 避免监听
document或document.body—— Safari 等旧环境支持不稳定；优先锁定具体容器，如#main-content或.feed-list
配置项必须显式启用变化类型
options 对象若所有布尔字段都为 false（如只写 { subtree: true }），会直接抛出 TypeError。关键组合要按需明确：
- 监听子节点增删 →
{ childList: true }；深层嵌套需加subtree: true - 监听 class 或 style 变更 → 不能只改
el.className，必须用setAttribute('class', ...)，并配{ attributes: true, attributeFilter: ['class'] } - 监听文本内容 → 必须同时设
{ characterData: true, subtree: true }；仅characterData: true只响应目标节点自身 textNode
回调里处理的是“快照”，不是实时 DOM
MutationRecord 是变更发生瞬间的静态副本，节点状态可能已失效：
-
mutation.removedNodes中的节点已脱离文档树，.querySelector()或读offsetHeight会失败 → 先用Array.from(mutation.removedNodes)缓存副本 - 需要读布局信息（如
getBoundingClientRect()）→ 放进requestAnimationFrame()或setTimeout(() => {}, 0)延迟执行 - 回调中直接修改同一节点文本可能触发新变动 → 加守卫标记（如
if (isMutating) return），或用takeRecords()清空队列后再统一处理
必须主动 disconnect，尤其在组件卸载时
长期驻留的 observer 会持续占用内存，且在 v-if 切换、React key 变更等场景下，旧节点被销毁，observer 容易断连或漏事件：
- Vue 中在
onBeforeUnmount调用observer.disconnect() - React 中在
useEffect清理函数里调用observer.disconnect() - 若需复用 observer，可封装成函数返回
start()和stop()方法，避免重复实例化
