nextTick的原理

1、JS 运⾏机制

JS 执⾏是单线程的， 它是基于事件循环的。 事件循环⼤致分为以下⼏个步骤：
（1） 所有同步任务都在主线程上执⾏， 形成⼀个执⾏栈（execution context stack） 。
（2） 主线程之外， 还存在⼀个"任务队列"（task queue） 。 只要异步任务有了运⾏结果， 就在"任务队
列"之中放置⼀个事件。
（3） ⼀旦"执⾏栈"中的所有同步任务执⾏完毕， 系统就会读取"任务队列"， 看看⾥⾯有哪些事件。 那
些对应的异步任务， 于是结束等待状态， 进⼊执⾏栈， 开始执⾏。
（4） 主线程不断重复上⾯的第三步。

2、nextTick的作用

nextTick 就是设置一个回调，用于异步执行。
就是把你设置的回调放在 setTimeout 中执行，这样就算异步了，等待当时同步代码执行完毕再执行。

this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });

当页面上的元素被重新渲染之后，才会执行指定回调函数中的代码。

3、如何将多个设置的回调在一起执行异步调用

每设置一个 nextTick 就新建一个 setTimeout ，毕竟一个 setTimeout 是异步，两个setTimeout 也是异步，两个都要等在 同步代码执行完毕之后才执行，那我直接只设置一个 setTimeout 不就好了。

存在 回调数组 里。每次调用 nextTick，便往数组里面 push 设置的回调
只注册一个 setTimeout，时间为0，用于遍历 回调数组，然后逐个执行子项
同步代码执行完毕，setTimeout 自然会执行

4、Vue实现nextTick的原理

Vue 不止使用 setTimeout 实现nextTick；
会判断promise是否存在，选择任务类型。如果promise存在，就使用微任务。

5、Vue在一个tick中多次更新数据页面只会更新一次

即使在 Vue 中多么频繁地修改数据，最后 Vue 页面只会更新一次。

例如：
数据 name 被 页面引用，name 会收集到 页面的 watcher；
name 被修改时，会通知所有收集到的 watcher 进行更新（watcher.update）；
如果name 一时间被修改三次时，按道理应该会通知三次 watcher 更新，那么页面会更新三次，但是最后只会更新一次。
这是因为：
当数据变化后，把 watcher.update 函数存放进 nextTick 的 回调数组中，并且会做过滤。
通过 watcher.id 来判断 回调数组 中是否已经存在这个 watcher 的更新函数不存在，才 push。
之后 nextTick时 遍历回调数组，便会执行了更新。

所以当三次修改数据的时候，会 push 回调数组 三个 watcher.update，但是只有第一次是 push 成功的，其他的会被过滤掉，因为已经存在了。
所以，不管你修改多少次数据，nextTick 的回调数组中只存在唯一一个 watcher.update，从而页面只会更新一次。