vue延迟执行的方法_Vue源码系列-nextTick

nextTick 是 Vue 的⼀个核⼼实现。他的作用是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。API — Vue.js​cn.vuejs.orgconst callbacks = []function nextTick(cb , ctx) { let _resolve callbacks.push(() => { if...
摘要由CSDN通过智能技术生成

nextTick 是 Vue 的⼀个核⼼实现。他的作用是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。

API — Vue.js​cn.vuejs.org
00241a9441e2dfb92e14aff97f289d9a.png
const callbacks = []
function nextTick(cb , ctx) {
    
  let _resolve
  callbacks.push(() => {
    
    if (cb) {
    
      try {
    
        cb.call(ctx)
      } catch (e) {
    
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
    
      _resolve(ctx)
    }
  })
  if (!pending) {
    
    pending = true
    timerFunc()
  }
  if (!cb && typeof Promise !== 'undefined') {
    
    return new Promise(resolve => {
    
      _resolve = resolve
    })
  }
}

如上面方法所示,当调用nexttick时,会往callbac

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js的$nextTick函数是用于在DOM更新之后执行异步操作的方法。该方法的实现使用了微任务队列,即将异步操作推入到微任务队列中,在DOM更新后执行异步操作。$nextTick方法Vue.js响应式系统的重要部分,它确保了Vue.js组件的异步行为和数据响应式。 具体的实现过程如下: 1. 首先检查是否支持原生的Promise对象,如果支持,则直接返回Promise.resolve()。 2. 如果不支持原生的Promise对象,则创建一个新的Promise对象。 3. 将一个空函数推入微任务队列中。 4. 在新创建的Promise对象的resolve回调中,再次推入一个空函数到微任务队列中。 5. 当浏览器执行到微任务队列中的空函数时,DOM更新已经完成,可以执行异步操作了。 下面是$nextTick方法代码: ```javascript Vue.prototype.$nextTick = function(fn: Function) { return nextTick(fn, this) } ``` 其中,nextTick是一个工具函数,它实现了具体的异步操作逻辑: ```javascript export function nextTick (cb?: Function, ctx?: Object) { let _resolve callbacks.push(() => { if (cb) { try { cb.call(ctx) } catch (e) { handleError(e, ctx, 'nextTick') } } else if (_resolve) { _resolve(ctx) } }) if (!pending) { pending = true if (useMacroTask) { macroTimerFunc() } else { microTimerFunc() } } // $flow-disable-line if (!cb && typeof Promise !== 'undefined') { return new Promise(resolve => { _resolve = resolve }) } } ``` 该函数定义了一个callbacks数组用于存储异步操作,当调用nextTick函数时,将回调函数push进callbacks数组中,然后判断是否有待执行的异步操作,如果没有,则通过macroTimerFunc或microTimerFunc函数执行异步操作。 最后,如果调用$nextTick方法时没有传入回调函数,则会返回一个新的Promise对象,用于异步操作的等待和处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值