需要了解的知识点：Vue视图更新的原理、事件循环机制。

Vue视图更新的原理：

Vue视图更新是异步更新，意思就是当响应式数据发生改变的时候，并不是立即去更新视图，而是等到下次事件循环的时候再去更新。官网文档中有这样一段话如下：

• 意思就是说Vue响应式状态改变的时候，Dom的更新会被缓存在一个异步队列中，到下一次事件循环的时候才会一起执行，其实主要是考虑到性能方面。
• 而在更新视图也就是Dom的时候其实最终就是调用了nextTick这个方法，我们单独调用的也是nextTick。（Vue视图更新自动调用及我们手动调用的都是同一个）

事件循环机制：关键字--单线程、异步任务、同步任务、主线程、执行栈、任务队列、微任务、宏任务。

• js 是单线程非阻塞的，单线程也就是有一个主线程，就是事件循环实现的。(假定 js 同时有两个线程，一个在某个 dom 节点上添加内容，而另一个删除内容，浏览器就不知道该以那个线程为准了，所以必须是单线程的)
• 任务在单线程上的执行是有优先级的，根据优先级就有同步和异步任务，同步任务优先级要高。
• 异步任务分为宏任务和微任务，微任务优先级高于宏任务，所以一般先执行微任务再执行宏任务。
• 同步任务在主线程排队执行，会形成一个执行栈，而异步任务则是会先放入任务队列挂起，处于等待状态，等执行栈的同步任务全部执行完后，系统就会读取任务队列及里面的异步任务，结束等待状态，进入执行栈开始执行。主线程则是不断地重复从任务队列中读取事件，这个过程是循环不断地，所以又称为事件循环。

可以看下这篇好文：www.zhihu.com/tardis/bd/a…

nextTick的实现原理

• nextTick官方给出的概念：等待下一次 DOM 更新刷新的工具方法。
• 个人理解：就是由于Vue视图更新是异步的，所以当响应式数据发生改变的时候不能同步的拿到最新的Dom,而nextTick则就是相当于一个异步方法，它会在下一次事件循环的时候才执行，更新DOM。所以它的源代码里面就是宏任务及微任务去实现异步的，主要用了四种如下：
  1. Promise微任务
  2. MutationObserver微任务
  3. setImmediate宏任务
  4. setTimeout宏任务

详细了解可以看下这篇好文：blog.csdn.net/qq_44882018…