实现一个 nextTick

实现一个简单 nextTick，类似 Vue 的 nextTick

MutationObserver

由于浏览器端没有类似 Node.js 端现成的 process.nextTick 方法，需要利用 MutationObserver 对象来实现，MutationObserver 主要用于监听 DOM 更新，并且在 DOM 更新后执行一个回调函数。

它的用法如下。

<button id="btn">+1</button>
<span id="span">1</span>

const span = document.getElementById('span')
const config = { attributes: true, childList: true, subtree: true };

const callback = function(mutationsList, observer) {
  console.log('hi')
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(span, config);

btn.onclick = () => {
  span.innerText = Number(span.innerText) + 1
}

利用这个特性，创建一个文本节点（不需要插入 DOM 树中），并改动该节点，来触发一个微任务调用，就可以实现一个简单的 nextTick。

function nextTick(fn) {
  if (typeof process !== 'undefined' && typeof process.nextTick === 'function') {
    return process.nextTick(fn)
  }
  const observer = new MutationObserver(fn)
  const textNode = document.createTextNode('')
  observer.observe(textNode, {
    characterData: true
  })
  textNode.data = '0'
}