ITPub博客

首页 > 应用开发 > IT综合 > 从 Vue3 源码中再谈 nextTick

从 Vue3 源码中再谈 nextTick

原创 IT综合 作者:dustinny 时间:2021-03-06 16:18:43 0 删除 编辑

  开始之前先看下官方对其的定义

  定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM

  看完是不是有一堆问号?我们从中找出来产生问号的关键词

  下次DOM更新循环结束之后?

  执行延迟回调?

  更新后的DOM?

  从上面三个疑问大胆猜想一下

  vue更新DOM是有策略的,不是同步更新

  nextTick可以接收一个函数做为入参

  nextTick后能拿到最新的数据

  好了,问题都抛出来了,先来看一下如何使用

  import{createApp,nextTick}from'vue'

  const app=createApp({

  setup(){

  const message=ref('Hello!')

  const changeMessage=async newMessage=>{

  message.value=newMessage

  //这里获取DOM的value是旧值

  await nextTick()

  //nextTick后获取DOM的value是更新后的值

  console.log('Now DOM is updated')

  }

  }

  })

  <a href="亲自试一试</a>

  那么nextTick是怎么做到的呢?为了后面的内容更好理解,这里我们得从js的执行机制说起

  JS执行机制

  我们都知道JS是单线程语言,即指某一时间内只能干一件事,有的同学可能会问,为什么JS不能是多线程呢?多线程就能同一时间内干多件事情了

  是否多线程这个取决于语言的用途,一个很简单的例子,如果同一时间,一个添加了DOM,一个删除了DOM,这个时候语言就不知道是该添还是该删了,所以从应用场景来看JS只能是单线程

  单线程就意味着我们所有的任务都需要排队,后面的任务必须等待前面的任务完成才能执行,如果前面的任务耗时很长,一些从用户角度上不需要等待的任务就会一直等待,这个从体验角度上来讲是不可接受的,所以JS中就出现了异步的概念

  概念

  同步在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务

  异步不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行

  运行机制

  (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

  (2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。

  (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

  (4)主线程不断重复上面的第三步

  image.png

  nextTick

  现在我们回来vue中的nextTick

  实现很简单,完全是基于语言执行机制实现,直接创建一个异步任务,那么nextTick自然就达到在同步任务后执行的目的

  const p=Promise.resolve()

  export function nextTick(fn?:()=>void):Promise<void>{

  return fn?p.then(fn):p

  }

  <a href="亲自试一试</a>

  看到这里,有的同学可能又会问,前面我们猜想的DOM更新也是异步任务,那他们的这个执行顺序如何保证呢?

  别急,在源码中nextTick还有几个兄弟函数,我们接着往下看

  queueJob and queuePostFlushCb

  queueJob维护job列队,有去重逻辑,保证任务的唯一性,每次调用去执行queueFlush queuePostFlushCb维护cb列队,被调用的时候去重,每次调用去执行queueFlush

  const queue:(Job|null)[]=[]

  export function queueJob(job:Job){

  //去重

  if(!queue.includes(job)){

  queue.push(job)

  queueFlush()

  }

  }

  export function queuePostFlushCb(cb:Function|Function[]){

  if(!isArray(cb)){

  postFlushCbs.push(cb)

  }else{

  postFlushCbs.push(...cb)

  }

  queueFlush()

  }

  queueFlush

  开启异步任务(nextTick)处理flushJobs

  function queueFlush(){

  //避免重复调用flushJobs

  if(!isFlushing&&!isFlushPending){

  isFlushPending=true

  nextTick(flushJobs)

  }

  }

  flushJobs

  处理列队,先对列队进行排序,执行queue中的job,处理完后再处理postFlushCbs,如果队列没有被清空会递归调用flushJobs清空队列

  function flushJobs(seen?:CountMap){

  isFlushPending=false

  isFlushing=true

  let job

  if(__DEV__){

  seen=seen||new Map()

  }

  //Sort queue before flush.

  //This ensures that:

  //1.Components are updated from parent to child.(because parent is always

  //created before the child so its render effect will have smaller

  //priority number)

  //2.If a component is unmounted during a parent component's update,

  //its update can be skipped.

  //Jobs can never be null before flush starts,since they are only invalidated

  //during execution of another flushed job.

  queue.sort((a,b)=>getId(a!)-getId(b!))

  while((job=queue.shift())!==undefined){

  if(job===null){

  continue

  }

  if(__DEV__){

  checkRecursiveUpdates(seen!,job)

  }

  callWithErrorHandling(job,null,ErrorCodes.SCHEDULER)

  }

  flushPostFlushCbs(seen)

  isFlushing=false

  //some postFlushCb queued jobs!

  //keep flushing until it drains.

  if(queue.length||postFlushCbs.length){

  flushJobs(seen)

  }

  }

  好了,实现全在上面了,好像还没有解开我们的疑问,我们需要搞清楚queueJob及queuePostFlushCb是怎么被调用的

  //renderer.ts

  function createDevEffectOptions(

  instance:ComponentInternalInstance

  ):ReactiveEffectOptions{

  return{

  scheduler:queueJob,

  onTrack:instance.rtc?e=>invokeArrayFns(instance.rtc!,e):void 0,

  onTrigger:instance.rtg?e=>invokeArrayFns(instance.rtg!,e):void 0

  }

  }

  //effect.ts

  const run=(effect:ReactiveEffect)=>{

  ...

  if(effect.options.scheduler){

  effect.options.scheduler(effect)

  }else{

  effect()

  }

  }

  看到这里有没有恍然大悟的感觉?原来当响应式对象发生改变后,执行effect如果有scheduler这个参数,会执行这个scheduler函数,并且把effect当做参数传入

  绕口了,简单点就是queueJob(effect),嗯,清楚了,这也是数据发生改变后页面不会立即更新的原因

  effect传送门

  为什么要用nextTick

  一个例子让大家明白

  {{num}}

  for(let i=0;i<100000;i++){

  num=i

  }

  如果没有nextTick更新机制,那么num每次更新值都会触发视图更新,有了nextTick机制,只需要更新一次,所以为什么有nextTick存在,相信大家心里已经有答案了。

  总结

  nextTick是vue中的更新策略,也是性能优化手段,基于JS执行机制实现

  vue中我们改变数据时不会立即触发视图,如果需要实时获取到最新的DOM,这个时候可以手动调用nextTick


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69995861/viewspace-2761553/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2021-03-05

  • 博文量
    11
  • 访问量
    4101