vue2中的$nextTick原理和简单实现

一、原理
1.1、它的原理涉及到 Vue.js 的异步更新队列机制;
1.2、在 Vue.js 中，当数据变化时，Vue 实例会异步执行更新。具体的更新过程是：
触发数据变化，触发响应式 getter。
通过 Dep（依赖管理器）进行依赖收集。
数据发生变化时，通知相关的 watcher。
watcher 将回调函数放入异步更新队列。
而 $nextTick就是在这个异步更新队列执行完毕后被调用的。它的作用是在DOM更新之后执行回调函数，确保你在回调中访问的是更新后的DOM1.3、$nextTick 利用了 JavaScript 引擎的事件循环机制，将回调函数推迟到下一个事件循环中执行，以确保在 DOM 更新完成后执行（简单来说就是利用微任务和宏任务）
1.4、在 Vue 3 中，$nextTick被移除了，而是直接使用nextTick方法，用法和原理基本类似‘二、实现方式（Promise、MutationObserver、setTimeout）‘在现代浏览器中，this.$nextTick 使用了 Promise 或 MutationObserver 来实现微任务的触发。在不支持 Promise 和 MutationObserver 的环境中，会回退到使用 setTimeout 作为宏任务
以下是简单实现代码

Vue.prototype.$nextTick = function (callback) {
  // 将回调函数存入队列
  callbacks.push(callback)
  if (!pedding) { 
    pedding = true
    if (usePromise) {
      // 在promise微任务中调用
      Promise.resolve().then(fullCallback)
    } else if (useMutationObserver) {
     // 在MutationObserver宏任务中调用
      const oberser = new MutationOnserver(fullCallback)
      // 创建文本节点
      const textNode = document.createrTextNode('1')
      // 观察文本节点的data属性变化
      // obserse 第一个参数，需要监听的节点；第二个参数 监听检点的类型
      // characterData： 文字类型
      // attributes：表示监测元素属性的变化
      // childList: 表示监测子节点的增加或删
      // subtree: 表示监测整个子树
      // eg: observer.observe(targetElement, { attributes: true, childList: true, subtree: true })
      oberser.obserse(textNode, { characterData: true })
      // 修改文本节点的data属性，触发回调
      textNode.data = '2'
    } else {
      // 在不支持Promise和MutationObserver微任务调用时，回退到setTimeout宏任务调用
      setTimeout(fullCallback, 0)
    }
  }
}
function fullCallback() {
 // 循环调用回调函数
 for (let i = 0; i < callbacks.length; i++) {
   callbacks[i]()
 }
 // 重置状态
 callbacks = []
 pedding = false
}

三、MutationObserver不支持IE11以下的版本，兼容方式

mutation-observer-polyfill.js 是 MutationObserver 的 Polyfill 库。通过在页面中引入这个 Polyfill，我们确保了即使浏览器不原生支持 MutationObserver，我们仍然可以在代码中使用它。Polyfill 会自动检测浏览器支持情况
四、宏任务（macrotask）和微任务（microtask）
4.1、宏任务包括事件处理、setTimeout、setInterval 等
4.2、微任务包括Promis、MutationObserver
4.3、微任务比宏任务先执行
五、时间循环机制（Event Loop）
5.1、事件循环（Event Loop）是 JavaScript 引擎处理异步操作的一种机制，它使得 JavaScript 能够处理并发的任务而不阻塞后续代码的执行。在浏览器中，事件循环是浏览器实现的，而在 Node.js 中，事件循环是由 Node.js 运行时提供的