利用 MutationObserver 实时监听DOM内容 子节

/**
   *
   * @param {*} targetClass 选择类名字符串：'#app' | '.app' | 'app'
   * @returns 监听实例对象 observer 之后，可停止观察  observerObj.disconnect();
   */
  function watchDom(targetClass) {
    // 获取监听的DOM元素
    const targetNodeDom =
      document.querySelector(targetClass) ||
      document.querySelector('#' + targetClass) ||
      document.querySelector('.' + targetClass) ||
      document.querySelector('html')
    // 观察器的配置（需要观察什么变动）
    const config = {
      attributes: true, // 【是否监听属性变化】
      attributeFilter: undefined, //【监听的属性范围，如果设置为undefined | 没有设置表示监听全部的属性】
      attibuteOldValue: true, //【是否把 回调函数中的MutationRecord.oldValue 对象是否包含了更改前的数据
      characterData: true, //【是否监听 内部子文本节点的数据发生变化】
      characterDataOldValue: true, // 【是否把 之前的数据发送给 MutationRrecord】
      childList: true, //【是否 监听子节点的插入/删除】
      subtree: true, // 【是否 把监听的范围扩展到内部的全部子孙节点】
    }
    // 当观察到变动时执行的回调函数
    const callback = function (mutationsList, observer) {
      for (let mutation of mutationsList) {
        console.log('有节点发生改变，当前节点的类型是：' + mutation.type)
        // 先停止观察，否则会死循环
        observer.disconnect()
        window._myOb = null
        // ==========================
        // TODO: 触发要更新的逻辑
        window.location.reload()
        // ==========================
        // 再次开启观察
        if (!window._myOb) {
          window._myOb = watchDom('#app')
        }
      }
    }
    // 创建一个观察器实例并传入回调函数
    const observer = new MutationObserver(callback)
    // 以上述配置开始观察目标节点
    observer.observe(targetNodeDom, config)
    // 暴露方便外部操作
    return observer
  }
  window._myOb = watchDom('#app')
  // 停止观察
  //  window._myOb.disconnect()

参考文档: MDN MutationObserver - Web API 接口参考 | MDN。