保存成功
保存失败,请重试

从 JS Event Loop 机制看 Vue 中 nextTick 的实现原理

作者/分享人:大师兄
向 Ta 提问
我就是大师兄😄 ,喜欢钻研和分享技术,现是某不知名公司移动端架构师兼撸代码。主要开发产品:mdn(适配app和微信的移动端解决方案),pageui(移动端ui组件库),formBuilder(可以让前端建表和操作表的表单设计器)。运营的公众号:web前端开发大师兄。

我们知道 Vue 的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。这样可以避免不必要的重复计算和 DOM 操作上非常重要。通过本场 Chat 你可以了解到:

  1. JavaScript 中的 Event Loop 运行机制
  2. JavaScript 中函数调用栈与任务队列
  3. 了解 JavaScript 中的 MacroTask(Task) 与 MicroTask(Job)
  4. 学习 Vue.js 中是如何实现 vm.$nextTick()
  5. 如何更好的使用 vm.$nextTick()
已有200人预订
预订达标
文章出炉
交流日期
     
17.11.03
17.11.15
17.11.23 20:30
查看文章评论/提问
像我这样的人
你好,我想问下vue 的nextTick里面的回调是在下个Tick执行的吗?根绝你的文章我觉得是在本次tick执行的啊,比如这个代码 this.name="new name"; this.$nextTick(()=>{ console.log(this.name) }) 我通过调试发现,执行完本轮的task后就去执行jobs也就是一般执行promise.then()里面的回调,然后进而执行更新组件数据的代码,再执行下面手动触发的nextTick的回调,然后开始UI rendre,此时本轮Tick结束,我怎么感觉nextTick这个叫法不太对劲呢?
你可能还喜欢
被动收入 101 :使用云开发和 Taro 开发一个小程序
白宦成
恕我直言,90% 的程序员都扛不住这波 MQ 的面试四连炮!
王码农
[动图演示]Redis 持久化 RDB/AOF 详解与实践
韦世东
Apollo 5.0 障碍物行为预测技术
Apollo开发者社区
超高性价比的 MongoDB 零基础快速入门实战教程
韦世东
抢先阅读 Kubernetes 1.15 新特性解读
张晋涛
微信扫描登录
关注提示×
扫码关注公众号,获得 Chat 最新进展通知!
入群与作者交流×
扫码后回复关键字 入群
Chat·作者交流群
入群码
该二维码永久有效