mutationobserver 仅监听 dom 变化，无法监听 javascript 数据变化；它响应元素结构或属性变更，但对对象、数组等 js 数据修改完全无感知，需用 proxy 或框架响应式方案监听数据。
MutationObserver 不能监听 JavaScript 数据变化
MutationObserver 只监听 DOM 树的结构或属性变更，比如 element.innerHTML = 'xxx'、el.setAttribute('class', 'new')、节点增删等。它**完全不感知 JS 对象、数组、变量值的修改**——哪怕你用 data.value = 123 改了某个对象字段，MutationObserver 一概收不到。
这是最常被误解的一点：把“DOM 变化”和“数据变化”混为一谈。HTML5 本身没有提供原生的“响应式数据监听”机制（不像 Vue 的 ref 或 React 的 useState）。
想监听 JS 数据变化，得换方案
真要监听普通对象/数组的属性赋值、下标修改等，必须借助语言层能力：
-
Object.defineProperty（仅适用于已知属性名的简单对象） -
Proxy（推荐，支持动态属性、数组索引、delete 操作，ES6+） - 框架封装层（如 Vue 3 的
reactive就基于Proxy）
例如用 Proxy 监听一个对象：
立即学习“前端免费学习笔记（深入）”；
const data = { count: 0, name: 'test' };
const observed = new Proxy(data, {
set(target, key, value) {
console.log(`数据变更：${key} → ${value}`);
target[key] = value;
// 这里可触发 DOM 更新、发事件、通知视图等
return true;
}
});
observed.count = 5; // 控制台输出：数据变更：count → 5MutationObserver 真正该用在哪
当你需要响应「外部脚本或第三方库对 DOM 的直接操作」时，MutationObserver 才是正确选择。典型场景包括：
- 第三方广告 SDK 动态插入
<div id="ad-banner"> <li>用户粘贴富文本后，编辑器自动清理 <code>style属性 - 检测某个元素是否被其他代码移除（比如 SPA 路由切换时 DOM 卸载）
- 监听
class或data-*属性变化来驱动 UI 状态（需配置attributes: true）
示例：监听某容器内子节点增删
const container = document.getElementById('list');
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
console.log('子节点变了', mutation.addedNodes, mutation.removedNodes);
}
});
});
<p>observer.observe(container, {
childList: true,
subtree: true // 包含后代节点
});别把 Proxy 和 MutationObserver 搞混了
两者解决的问题域完全不同，强行组合反而增加复杂度：
-
MutationObserver是 DOM API，回调在 DOM 变更后异步触发（microtask 队列） -
Proxy是 JS 引擎层拦截，发生在赋值语句执行时（同步） - 想实现“数据变 → 自动更新 DOM”，你应该：用
Proxy拦截数据，再手动调用el.textContent = data.xxx；而不是指望 MutationObserver 去“反过来推断”数据变了
真正难的不是选哪个 API，而是分清“谁该负责哪一层”——数据逻辑归 JS，视图反馈归 DOM，中间那条线得自己连清楚。
