mutationObserver秘密

它是啥？
MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。
另外，vue的nextTick就考虑了mutationObserver微任务的机制
微任务promise - 微任务 mutatioinObserver - 宏任务 setTimeout

返回啥？
const observer = new MutationObserver(callbackFn)创建并返回一个新的 MutationObserver, callbackFn会在observer.observe()指定的 DOM 发生变化时被调用

有什么方法？
const observer = new MutationObserver(callbackFn)

• disconnect()
  阻止 MutationObserver 实例observer继续接收通知，直到再次调用其 observe()方法之前，该观察者对象的回调函数callbackFn都不会再被调用。

• observe()
  通过配置 MutationObserver 在 DOM 更改的监控选项，observer回调函数callbackFn接收通知。

• takeRecords()
  从 MutationObserver 的通知队列中删除所有待处理的通知，并将它们返回到 MutationRecord 对象的新 Array 中。

方法怎么用？

• observe(element, options)
  options对象配置如下：

  **childList：**
  
  添加、删除目标节点的子节点时会收到通知（子节点的后代节点添加或删除时不会收到通知）
  
  **attribute：**
  
  修改目标节点属性时会收到通知
  
  **characterData：**
  
  观察目标节点下所有文本类型节点（即子代或后代）的文字变化（注意：添加、删除文本节点不会被观察到，如果改变之前的类型不是文本节点也不会被观察到），该属性只能配合subtree使用。
  
  **subtree：**
  
  目标节点或后代节点变更时都会触发，必须配合其他属性一起使用
  
  **attributeOldValue：**
  
  如果attribute属性为true或者省略，则相当于设置为true，表示需要记录改变前的目标属性值，设置了attributeOldValue可以省略attributes设置
  
  **characterDataOldValue:**
  
  如果characterData为true或省略，则相当于设置为true,表示需要记录改变之前的目标数据，设置了characterDataOldValue可以省略characterData设置 
  
  **attributeFilter：**
  
  attributes设置为true或者被忽略时可以自定义需要观察的属性名称数组
  

• MutationRecord的属性
  变动记录中的属性如下：

  1.  **type**：如果是属性变化，返回"attributes"，如果是一个CharacterData节点（Text节点、Comment节点）变化，返回"characterData"，节点树变化返回"childList"
  2.  **target**：返回影响改变的节点
  3.  **addedNodes**：返回添加的节点列表
  4.  **removedNodes**：返回删除的节点列表
  5.  **previousSibling**：返回分别添加或删除的节点的上一个兄弟节点，否则返回null
  6.  **nextSibling**：返回分别添加或删除的节点的下一个兄弟节点，否则返回null
  7.  **attributeName**：返回已更改属性的本地名称，否则返回null
  8.  **attributeNamespace**：返回已更改属性的名称空间，否则返回null
  9.  **oldValue**：返回值取决于type。对于"attributes"，它是更改之前的属性的值。对于"characterData"，它是改变之前节点的数据。对于"childList"，它是null 
  
  其中 **type**、**target**这两个属性不管是哪种观察方式都会有返回值，其他属性返回值与观察方式有关，比如只有当attributeOldValue或者characterDataOldValue为true时oldValue才有返回值，只有改变属性时，attributeName才有返回值等。
  
  

• 三、MutationObserver选项与MutationEvent名称之间的对应关系

  MutationEvent	MutationObserver options
  DOMNodeInserted	{ childList: true, subtree: true }
  DOMNodeRemoved	{ childList: true, subtree: true }
  DOMSubtreeModified	{ childList: true, subtree: true }
  DOMAttrModified	{ attributes: true, subtree: true }
  DOMCharacterDataModified	{ characterData: true, subtree: true }