MutationObserver

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。
Vue 内部 nextTick 就使用到了这个 API

```JS const observer = new MutationObserver(function (mutations, observer) { mutations.forEach(function(mutation) { console.log(mutation); }); });

const article = document.querySelector('article');

const options = { childList: true, attributes: true } ;

observer.observe(article, options);

// observe()方法接受两个参数，第一个是所要观察的DOM元素是article，第二个是所要观察的变动类型（子节点变动和属性变动）。 /* subtree：布尔值，表示是否将该观察器应用于该节点的所有后代节点。 attributeOldValue：布尔值，表示观察attributes变动时，是否需要记录变动前的属性值。 characterDataOldValue：布尔值，表示观察characterData变动时，是否需要记录变动前的值。 attributeFilter：数组，表示需要观察的特定属性（比如['class','src']）。 /*


4. `disconnect()`方法用来停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器。

5. `takeRecords()`方法用来清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。

6. DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个`MutationRecord`实例所组成的数组。

```JS
// src/core/util/next-tick.js
...
 else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // Use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
}
...

none

JS--MutationObserver

MutationObserver