vue nextTick的简化版

以下内容来源于通义千问 的回答

Vue.js 中,$nextTick 的核心功能是在下次 DOM 更新循环结束之后执行延迟回调。这是因为 Vue 使用异步更新队列来优化渲染性能,当数据发生变化时,并不会立即更新 DOM,而是在同一事件循环结束时批量更新。

要实现一个类似的工具函数,可以参考 Vue.js 源码中 nextTick 的基本思路,主要依赖于 Promise 和浏览器的异步机制(例如 MutationObserverPromise.resolve().then()setTimeout(fn, 0)来保证回调在 DOM 更新之后执行。

简化版的模拟实现

dart 复制代码
function nextTickLikeVue(callback) {
  let timerFunc;

  if (typeof Promise !== 'undefined' && Promise.toString().indexOf('[native code]') !== -1) {
    // 如果环境支持原生 Promises
    timerFunc = () => Promise.resolve().then(callback);
  } else if (typeof MutationObserver !== 'undefined' && typeof window !== 'undefined') {
    // 如果环境支持 MutationObserver
    let obs;
    const queue = [];
    const observer = new MutationObserver(() => {
      callback();
      queue.forEach(cb => cb());
      queue.length = 0;
    });
    timerFunc = (cb) => {
      if (queue) {
        queue.push(cb);
      } else {
        callback();
      }
      if (!obs) {
        obs = observer.observe(document.body, { childList: true, subtree: true });
      }
      return () => {
        if (queue) {
          const index = queue.indexOf(cb);
          if (index > -1) queue.splice(index, 1);
        }
        if (queue.length === 0) {
          observer.disconnect();
        }
      };
    };
  } else if (typeof setTimeout !== 'undefined') {
    // 最后一种情况,如果以上都不支持,则降级使用 setTimeout
    timerFunc = (cb) => setTimeout(cb, 0);
  } else {
    throw new Error('No suitable method found for deferred execution of the callback.');
  }

  // 执行 timerFunc,返回清理函数(如果有)
  return timerFunc(callback);
}

// 使用示例:
nextTickLikeVue(() => {
  console.log('DOM 已经更新');
});
相关推荐
嘻嘻嘻嘻嘻嘻ys几秒前
《Spring Boot 3响应式架构实战:R2DBC驱动的高并发数据持久化革命》
前端·后端
滚石_stars1 分钟前
了解 CSS 的 display: inline-flex;
前端
程序员Bears1 分钟前
HTML5 新特性详解:语义化标签、表单与音视频嵌入
前端·html·html5·visual studio code
进取星辰1 分钟前
14、服务端组件:未来魔法预览——React 19 RSC实践
前端·react.js·前端框架
前端大白话7 分钟前
Vue2和Vue3语法糖差异大揭秘:一文读懂,开发不纠结!
javascript·vue.js·设计模式
剽悍一小兔7 分钟前
小程序发布后,不能强更的情况下,怎么通知到用户需要去更新?
前端
115432031q7 分钟前
基于SpringBoot+Vue实现的旅游景点预约平台功能十三
java·前端·后端
JiangJiang8 分钟前
🧠 面试官:受控组件都分不清?还敢说自己写过 React?
前端·react.js·面试
tianchang8 分钟前
JS 中 Map 的概念与使用
前端·javascript
Jenlybein8 分钟前
[ Javascript 面试题 ]:提取对应的信息,并给其赋予一个颜色,保持幂等性
前端·javascript·面试