mutationobserver 默认不监听任何变化，必须手动配置、启动并指定真实dom节点；监听class/style需用setattribute而非直接赋值；监听文本需同时设subtree、characterdata为true；react/vue中应监听稳定父容器并及时disconnect。
MutationObserver 不是“开箱即用”的监听器，它默认不监听任何变化，必须手动配置、手动启动、手动指定目标节点——漏掉任意一步，console.log 就永远不输出。
为什么 new MutationObserver() 后没反应？
只执行 new MutationObserver(callback) 不会触发任何监听。它只是创建了一个“待命的观察者”，还没被指派任务。
- 必须调用
observer.observe(targetNode, config)才真正开始监听 -
targetNode必须是真实存在于 DOM 中的节点（不能是null或尚未挂载的 Vue/React 元素） - 如果目标节点是异步插入的（如
v-if切换后才出现），需确保observe()在节点渲染完成后再执行 - 常见错误：监听了
document.body却往#container里加元素——得监听实际被操作的父容器，不是顶层节点
监听 class 或 style 属性变化要注意什么？
class 和 style 是“反射属性”（reflected attributes），直接赋值 el.className = 'x' 或 el.style.color = 'red' 不会触发 attributes: true 监听，必须用 setAttribute()。
- 启用监听需明确设置：
attributes: true - 想捕获具体哪个属性变，加
attributeFilter: ['class', 'data-status']；留空则监听所有属性（开销略大） -
el.classList.add()本质仍是调用setAttribute('class', ...)，可被监听 - 但
el.style.color = 'red'是修改 JS 对象属性，不改 HTML attribute，所以不会触发——得用el.setAttribute('style', 'color:red;') - 需要旧值？必须加
attributeOldValue: true，否则mutation.oldValue是undefined
怎么可靠监听文本内容（textContent）变化？
监听文本最易失败的环节是配置遗漏或节点结构误判。仅设 characterData: true 不够，必须组合生效。
- 必须同时开启：
subtree: true+characterData: true - 若目标可能动态插入新文本节点（如
contenteditable粘贴），还需加childList: true - 不要监听空
<div></div>——它底下没有 Text 节点（nodeType === 3），characterData根本不会触发 - 初始化时建议主动调用
observer.takeRecords()并比对初始textContent，避免漏掉首次渲染 - IE11 不支持，必须降级为
setInterval轮询（间隔 ≥ 100ms）
React/Vue 场景下监听为何突然失效？
不是 MutationObserver 坏了，而是你监听的节点被框架销毁重建了——比如 v-if 切换、key 变更、组件卸载重挂，旧节点从 DOM 移除，observer 自动失联。
- 别在组件销毁后还试图
observer.observe()，会报错 “Failed to execute 'observe' on 'MutationObserver': The node provided is not a descendant of the document.” - 正确做法：监听更稳定的父容器（如固定 ID 的 wrapper），并用
childList: true+subtree: true捕获新增节点 - 务必在组件
unmounted/useEffect cleanup中调用observer.disconnect()，防止内存泄漏 - 回调中避免直接修改同一节点文本，否则可能无限循环——加标记位或节流
最常被忽略的一点：MutationObserver 回调在 microtask 队列执行，比同步代码晚、比 setTimeout 早。你以为 DOM 没变，其实是你查得太早；你以为 observer 断了，其实是 target 被框架悄悄替换了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
