封装:
function nextick() {
return new Promise((resolve) => {
if (typeof Promise !== "undefined") {
// 使用 Promise.resolve().then() 以确保在微任务队列中执行
Promise.resolve().then(resolve);
} else if (typeof MutationObserver !== "undefined") {
// 使用 MutationObserver 监听 DOM 变化
let observer = new MutationObserver(resolve);
let textNode = document.createTextNode("1");
observer.observe(textNode, {
characterData: true,
});
textNode.textContent = "2";
} else {
// fallback 方案,使用 setTimeout 模拟异步
setTimeout(resolve, 0);
}
});
};
使用:
nextick().then(() => {
// 在 DOM 更新完成后执行的代码
console.log('DOM updated!');
});
你也可以将该方法挂载到vue的原形上,或者是window上面。