Mutation Observer是现代浏览器提供的高效工具，用于监听DOM变化并触发响应式更新。通过new MutationObserver(callback)创建实例，回调函数接收mutations（变更记录数组）和observer（观察器实例）两个参数。可监听childList、attributes、characterData等变化类型，并通过observe(target, config)指定目标节点与配置，如subtree: true表示递归监听后代节点。典型应用场景包括为动态添加的元素绑定事件或同步状态。当不再需要监听时，应调用disconnect()防止内存泄漏；若仅需监听一次，可在回调中自动断开。合理使用该机制可实现不依赖框架的数据与视图同步方案。
要实现对DOM变化的监听并触发响应式更新，Mutation Observer是现代浏览器提供的高效工具。它能观察DOM树的任何变动，比如节点添加、属性修改或文本更改，并在变化发生时执行回调函数。相比旧的DOMNodeInserted等事件，它性能更好、更可控。
创建Mutation Observer实例
使用MutationObserver构造函数创建一个观察器，传入一个回调函数，该函数会在检测到指定变化时被调用。
回调接收两个参数：一个是MutationRecord数组，记录所有发生的变更；另一个是观察器实例本身。
配置观察目标和选项
调用观察器的observe()方法，指定要监听的DOM节点及配置项。
常用配置项包括：
- childList：监听子节点增删
- subtree：是否递归监听后代节点
- attributes：监听属性变化
- characterData：监听文本内容变化
- attributeFilter：只监听特定属性（如['class', 'style']）
实现响应式更新逻辑
在回调中判断具体变化类型，执行相应的UI更新或状态同步操作。
例如，当某个容器内新增元素时，自动为其绑定事件或应用样式：
```javascript const appContainer = document.getElementById('app'); const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { if (node.nodeType === 1 && node.matches('.dynamic-item')) { // 为新元素绑定点击事件 node.addEventListener('click', () => alert('点击动态元素')); } }); } }); });observer.observe(appContainer, { childList: true, subtree: true });
<H3>停止与重启观察</H3> <p>避免内存泄漏，不需要监听时应调用<code>disconnect()</code>方法。</p> ```javascript // 停止监听 observer.disconnect(); // 重新开始 observer.observe(targetNode, config);
如果只想处理一次变化，可在回调中调用disconnect()自动停止。
基本上就这些。合理使用Mutation Observer可以精准捕获DOM变化，结合业务逻辑实现轻量级响应式更新机制，不依赖框架也能做到数据与视图同步。
