Mutation Observer 提供高效异步监听 DOM 变化，支持属性、子节点、文本等监控。通过 new MutationObserver(callback) 创建实例，调用 observe(target, config) 启动监听，配置项可精确控制监听范围如 childList、attributes、characterData 等。推荐针对具体节点监听，避免性能损耗。常见场景包括动态内容插入、class 变化检测、表单值监听。需合理管理生命周期，在不需要时调用 disconnect() 释放资源，防止内存泄漏。适用于 SPA 组件销毁前清理，确保稳定性和性能。
Mutation Observer 是现代浏览器提供的一种高效监听 DOM 变化的方法。相比已废弃的 DOM Mutation Events，它采用异步回调机制，在性能和灵活性上都有显著提升。通过它，你可以监控元素属性、子节点、文本内容等变化。
基本用法
创建一个 MutationObserver 实例时，传入一个回调函数，该函数会在观察到变化时被调用。然后调用 observe() 方法指定要监控的目标节点和配置项。
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('变化类型:', mutation.type);
if (mutation.type === 'childList') {
console.log('新增节点:', mutation.addedNodes);
console.log('删除节点:', mutation.removedNodes);
}
});
});
// 开始监听某个元素
observer.observe(document.body, {
childList: true, // 监听子节点增删
subtree: true, // 是否包括所有后代节点
attributes: true, // 监听属性变化
attributeFilter: ['class'], // 只监听 class 属性
characterData: true // 监听文本内容变化
});
常见监控场景与配置建议
根据实际需求调整 observe 的配置参数，可以精准控制监听范围，避免不必要的回调触发。
- 监控动态插入的内容（如 Ajax 加载）：启用 childList 和 subtree
- 检测样式类切换：开启 attributes 并配合 attributeFilter: ['class']
- 监听表单值变化（input 元素文本）：需要同时设置 characterData: true 和目标为文本节点的父级
- 减少性能开销：尽量避免监听整个 document.body，优先选择具体容器节点
停止监听与资源管理
当不再需要监听时，应及时断开观察器，防止内存泄漏或重复执行。
- observer.disconnect()：停止所有监听，清除待处理的变更记录
- observer.takeRecords()：获取当前已发生但未处理的变更列表，常用于清理前分析数据
- 在 SPA 或组件销毁时（如 Vue/React 生命周期结束），务必调用 disconnect
基本上就这些。Mutation Observer 虽强大，但也别滥用。合理使用能帮你捕捉关键 DOM 变动，而不当的监听可能导致性能下降。掌握好观察粒度和生命周期管理，才能发挥它的真正价值。
