异步更新是如何完成的

vue异步更新实现过程

  dep.notify()=>update()=> queueWatcher()=>nextTick()=>timerFunc(fn)=>flushCallbacks()=>flushSchedulerQueue()=>watcher.run()=>cb|render()
  1.数据发生变化时,触发收集器调用watcher的notify()方法。notify()方法执行对于dep(单个属性)的update()方法进行更新
  2.每个watcher对应一个update方法,update方法中调用watcher队列方方法,将所有的watcher放在一个队列函数中queueWatcher
  3.queueWatcher进行判断 如果已经进入队列则不重复添加,  如果队列已经执行刷新则    倒叙  遍历 通过当前的watcher.id 找到它大于队列中的watcher.id 插入到队列中,将队列刷新的方法传到nextTick()
  4.nextTick()将刷新队列的方法以回调函数的方式添加到 刷新callbacks数组中 通过timeFunc()方法将flushCallbacks()放在浏览器的异步队列中
  5.flushCallbacks()遍历callbacks的数据执行每一个callbacks函数,在callbacks数组中调用传入的刷新队列方法,执行watcher.run()方法触发render()渲染或者执行用户传入的回掉函数
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值