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 或尚未插入文档的临时节点。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 推荐监听具体容器（如 #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()

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！