vue的异步数据更新机制与$nextTick

vue异步更新dom

vue的响应式更新dom是异步执行的,不是数据发生变化之后dom立即发生变化,而是按照一定的逻辑更新dom。

具体是vue在检测到数据变化时,vue将开启一个队列,,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这在缓冲中去除重复数据造成的额外的dom操作和计算是非常必要的。在下一个nextTick中,vue执行的是已经去重的实际工作。

理解:vue执行dom更新时异步的,这个异步任务可以当成是一个promise的微任务,对同一个属性值进行多次赋值时,只有最后一次赋值会作为一个promise微任务放到更新队列里面。

$nextTick执行机制

Vue会异步更新DOM,会在当前执行栈的最后更新DOM,这个与JavaScript的原生操作dom有很大区别。vue中的$nextTick再JavaScript中相当于微任务,会在当前所有同步任务执行完之后再执行,$nextTick会得到dom更新后的结果。最后页面渲染是在始终是在微任务执行之后在执行的,所以$nextTick回调执行时还没有渲染,页面上看不到更新后的结果。

vue执行异步更新的目的

vue更新dom的流程:触发setter --> 监听watcher --> 重新渲染 render --> 生成虚拟dom (vdom)--> 更新dom 。如果每一次都执行该流程会非常消耗性能,所以使用异步更新DOM的机制,先对数据修改进行整合去重,再使用最终的结果一次性对DOM进行更新。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值