MutationObserver 监听 DOM 结构变化需配置 childList: true，目标节点必须已挂载；支持 subtree: true 监听后代节点，但不响应 class/style 等样式变更；回调中通过 addedNodes/removedNodes 处理增删节点，使用 disconnect() 避免内存泄漏。
用 MutationObserver 监听 DOM 节点结构变化，核心是配置 childList: true，并确保目标节点已真实存在于文档中。它不靠轮询，而是由浏览器在 DOM 变更后异步批量通知，效率高、响应准。
监听子节点增删（最常用场景）
只要节点被添加或移除，就会触发 type === 'childList' 的记录。
- 必须设
childList: true，否则完全收不到子节点变动 - 若想监听后代节点（比如动态插入的深层子元素），加上
subtree: true - 注意：只监听“结构”变化，不包括 class 切换、style 修改等样式类变更
正确选择和绑定目标节点
目标节点必须是已挂载的 DOM 元素，不能是 null、undefined 或尚未插入文档的临时节点。
- 推荐监听具体容器（如
#app、.content），而不是document.body或document，兼容性更稳 - 在 Vue/React 中，应在
mounted或useEffect中获取真实 DOM 节点再调用observe() - 可加一行校验：
console.log(targetNode?.nodeType === 1)，确保是有效元素节点
处理回调中的变化细节
回调接收的 mutationsList 是 MutationRecord 数组，每个记录含关键字段：
立即学习“前端免费学习笔记（深入）”；
-
mutation.type：值为'childList'表示子节点变动 -
mutation.addedNodes：新增的 NodeList，可用Array.from()转数组遍历 -
mutation.removedNodes：被移除的节点列表 -
mutation.previousSibling / nextSibling：可用于判断插入位置
及时停止监听避免内存泄漏
当不再需要监听时，主动调用 observer.disconnect()。
- 组件卸载、弹窗关闭、表单提交后等时机适合断开
- 断开后观察器不会自动重启，也不会保留未处理的记录
- 如需重新监听，须新建实例并再次调用
observe()
