Vue.nextTick和浏览器事件循环

69 阅读1分钟
  1. 首先数据同步更新,但此时DOM并没有更新,所以此时获取DOM的数据,一定还会是原始的数据
  2. 先明白一下浏览器的事件循环顺序:同步代码->微任务代码(包括有nextTick、promise的相关函数)->宏任务代码(包括有setTimeout、setInterval以及相关的事件函数)->DOM渲染->下一次事件循环
  3. 明白上述顺序之后,来说说Vue.nextTick,他会把内部的回调函数放在下一事件循环的微任务中执行。
  4. 也就是说第一次事件循环同步代码进行了更新,然后完成DOM渲染,然后下一次事件循环的Vue.nextTick就能够顺利获得相关更新后的数据啦