mutationobserver需target（已挂载dom节点）、options（至少一个true）和observe()三者齐全才触发；监听父容器+subtree、及时disconnect、注意microtask时机。
MutationObserver 不是“开了就能用”的监听器，它必须配对 target + options + observe() 三者齐全才可能触发；漏掉任意一环，回调就永远不会执行。
target 必须是已挂载的真实 DOM 节点
常见错误是传入 null、undefined 或 document fragment。比如在 Vue 的 setup() 里直接写 document.getElementById('x')，但此时组件还没挂载，ID 元素根本不存在。
- 检查方法：在调用
observer.observe()前加console.log(target, target?.nodeType)，确保输出类似<div id="x">…</div> 1 - 动态创建的节点（如
document.createElement('div')）必须先appendChild()或insertAdjacentElement()到真实 DOM，再调用observe() - 不要监听
document或document.body—— Safari 等旧版浏览器对根级观察支持不稳定，优先选具体容器（如#app或.content）
options 至少要开一个变化类型
MutationObserver 默认不监听任何东西。配置对象里 childList、attributes、characterData 三者必须至少有一个为 true，否则会抛出 TypeError。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 监听新增/删除子节点？必须设
{ childList: true }；想捕获深层嵌套节点，还得加subtree: true - 监听
class或style变更？不能只写className = 'x'或el.style.color = 'red'—— 这些操作不触发 attribute mutation；得用setAttribute('class', ...)，并配{ attributes: true, attributeFilter: ['class'] } - 监听文本内容？必须同时设
{ characterData: true, subtree: true }；仅characterData: true只监听目标节点自身的 textNode，子节点改了不会报
回调里拿不到“实时 DOM”快照
MutationRecord 是变更发生那一刻的静态快照，不是活引用。比如 mutation.removedNodes 里的节点已被移出文档树，查 .offsetHeight 会得 0，调 .querySelector() 会失败。
- 需要立刻读取被删节点信息？先用
Array.from(mutation.removedNodes)缓存副本 - 新增节点刚插入，但样式或布局未就绪？别急着读
getBoundingClientRect()，放进requestAnimationFrame()或setTimeout(() => {}, 0)再操作 - 回调中直接改同一节点文本？可能引发无限循环；加标记位（如
if (isHandling) return）或用takeRecords()清空队列后再处理
框架场景下容易断连的根本原因
Vue 的 v-if、React 的 key 变更，都会导致旧节点被彻底移除、新节点重建。此时 observer 不会自动重连，也不会报错，只是静默失效。
- 别试图在
unmounted后手动重observe()—— 新节点可能和旧 target 完全无关 - 正确做法：监听更稳定的父容器（如组件根元素），并启用
{ childList: true, subtree: true }，靠mutation.addedNodes捕获所有新插入节点 - 务必在清理函数（
onUnmounted/useEffect返回函数）中调用observer.disconnect()，避免内存泄漏
最常被忽略的一点：MutationObserver 的回调在 microtask 队列执行，比同步代码晚、比 setTimeout 早。你以为 DOM 已更新，其实 observer 还没来得及响应 —— 这不是 bug，是设计如此；真正的问题往往出在 target 本身被框架替换了，而不是“监听没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
