Vue的异步更新实现原理是怎样的？

本文共计1778个文字，预计阅读时间需要8分钟。

最近面试总结：经常会被问到这样一个问题：在使用Vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上显示的i是从1跳到100，还是怎样？答案当然只是会显示100。

最近面试总是会被问到这么一个问题：在使用vue的时候，将for循环中声明的变量i从1增加到100，然后将i展示到页面上，页面上的i是从1跳到100，还是会怎样？答案当然是只会显示100，并不会有跳转的过程。

怎么可以让页面上有从1到100显示的过程呢，就是用setTimeout或者Promise.then等方法去模拟。

讲道理，如果不在vue里，单独运行这段程序的话，输出一定是从1到100，但是为什么在vue中就不一样了呢？

for(let i=1; i<=100; i++){ console.log(i); }

这就涉及到Vue底层的异步更新原理，也要说一说nextTick的实现。不过在说nextTick之前，有必要先介绍一下JS的事件运行机制。

JS运行机制

众所周知，JS是基于事件循环的单线程的语言。 执行的步骤大致是：

1. 当代码执行时，所有同步的任务都在主线程上执行，形成一个执行栈；
2. 在主线程之外还有一个任务队列(task queue)，只要异步任务有了运行结果就在任务队列中放置一个事件；
3. 一旦执行栈中所有同步任务执行完毕（主线程代码执行完毕），此时主线程不会空闲而是去读取任务队列。此时，异步的任务就结束等待的状态被执行。
4. 主线程不断重复以上的步骤。