一：方式

1：采用Promise

function myNextTick(fn){
	return new Promise((resolve, reject) => {
			setTimeout(()=>{
				if(fn){
					fn()
				}
			},0)
			resolve()
		})
		}

2：采用MutationObserver

 const  myNextTick=(fn)=>{
	 const app=document.getElementById('app')
	 const config={
		   childList: true, // 观察目标子节点的变化，是否有添加或者删除
		   attributes: true, // 观察属性变动
		   subtree: true// 观察后代节点，默认为 false
	 }
	 const observe=new MutationObserver(()=>{
	 	 fn()
	  })
	 observe.observe(app,config)
 }

3：进阶版本

// 用于存储待执行的回调函数数组
const callbacks = [];

// 标记任务队列是否正在执行中
let pending = false;

// 定义执行任务队列的函数
function flushCallbacks() {
  pending = false;
  const copies = callbacks.slice(); // 复制一份待执行的回调函数数组
  callbacks.length = 0; // 清空回调函数数组
  for (let i = 0; i < copies.length; i++) {
    copies[i](); // 依次执行回调函数
  }
}

// 定义 nextTick 方法
function nextTick(callback) {
  callbacks.push(callback);

  if (!pending) {
    pending = true;
    // 在任务队列中添加一个微任务（Promise 微任务或 MutationObserver 微任务）
    // 可以确保回调函数在 DOM 更新循环结束之后执行
    // 这里简化为使用 Promise 微任务
    Promise.resolve().then(flushCallbacks);
  }
}

二：原理链接

nexttick是什么