mutationobserver 需显式调用 observe() 才生效，childlist: true 仅监听直接子节点，深层变化需 subtree: true；attributes 监听限于 element 节点且须与 childlist 或 characterdata 共存；回调中修改 dom 会触发循环，应使用 takerecords() 或节流控制。
childList 为 true 却不触发回调？检查 observe() 是否漏调
新建 MutationObserver 实例只是声明，不等于开始监听。必须显式调用 observer.observe(target, { childList: true }) 才会生效。常见错误是只写了 new MutationObserver(...) 就以为万事大吉，结果 DOM 真变了，console.log 一丁点输出都没有。
另外注意目标节点必须存在且是「被操作的父节点」：比如你要监听 #list 里新增了 <li>，就得观察 #list，而不是 document.body 或某个 <li> 子元素。
- 异步插入的节点（如 Vue/React 渲染后才挂载）需确保
observe()在其真实挂载后执行，可配合requestIdleCallback或框架的生命周期钩子 -
childList: true默认只监听直接子节点，深层嵌套变化要加subtree: true - 若同时监听增删，
mutation.removedNodes中的节点已脱离文档树，不能再调用.querySelector()或读取.offsetHeight，需立刻用Array.from(mutation.removedNodes)缓存引用
attributes 选项不生效？确认是否传了 attributes: true 且 target 是元素节点
attributes: true 不会监听所有属性——它只对 HTML 元素节点（Element）有效，对 Text 或 Document 节点无效。而且必须和 childList 或 characterData 至少一个共存，否则会抛 TypeError。
如果只想监听特定属性（比如 class 或 data-status），得加上 attributeFilter: ['class', 'data-status']；需要获取旧值，则必须配 attributeOldValue: true。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 修改
style属性时，mutation.attributeName是"style"，但旧值/新值在mutation.oldValue和target.getAttribute('style')中，不是target.style对象 - 通过
element.className = 'x'修改类名会触发，但element.classList.add('x')同样会触发，因为最终都反映为class属性变更 - 自定义属性（
data-*）默认会被监听，无需额外配置，除非你用了attributeFilter且没包含它
为什么 callback 里 mutation.type 总是 'childList'？别漏掉 subtree 配置
如果你观察的是 document.body，但变化发生在 #app > .content > ul > li 这种深层路径下，仅设 childList: true 是不够的——它只会捕获 body 直接子节点的变化（比如新增一个 <script></script> 或 <div id="app"></div>）。要监听后代任意层级的增删，必须加 subtree: true。
这个选项开销不小，尤其在大型 DOM 树中频繁变动时。不要无脑设 subtree: true，优先把观察目标收窄到最靠近变动区域的父容器。
-
subtree: true+childList: true是监听“任意后代节点增删”的最小必要配置 - 如果只关心某类标签（如所有
<img>插入），可在回调里用mutation.addedNodes.forEach(node => node.matches?.('img'))过滤，别依赖attributeFilter去筛节点类型 -
subtree不影响attributes的监听范围：属性变化仍只发生在你传入的target节点上，除非你也对后代节点单独调用observe()
回调里改 DOM 导致无限循环？用 takeRecords() 或防抖控制
MutationObserver 回调本身就是在微任务中执行的，如果在回调里又直接操作被观察的节点（比如往 #list 新增一项，而你正观察着 #list），就会再次触发回调，形成死循环。
这不是 bug，是设计使然。解决方式有两种：一是用 observer.takeRecords() 主动清空队列，再做修改；二是加简单节流，比如用 setTimeout 把 DOM 操作推到下一个宏任务。
- 避免在回调中调用
observer.disconnect()后又立刻observe()，这容易漏掉中间变化 - 若需临时停用，用
observer.disconnect()，处理完再observe()，比反复创建实例更轻量 - 复杂场景（如富文本编辑器）建议用
setImmediate或queueMicrotask包裹 DOM 更新，保持响应及时性
observer 一旦创建就能永久工作，该 disconnect() 的地方得手动断开，否则内存泄漏和重复回调都会找上门。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
