【Vue原理】NextTick - 白话版

写文章不容易，点个赞呗兄弟 专一 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工做原理，源码版助于了解内部详情，让咱们一块儿学习吧 研究基于 Vue版本 【2.5.17】

若是你以为排版难看，请点击 下面连接 或者 拉到 下面关注公众号也能够吧

【Vue原理】NextTick - 白话版

nextTick 是 Vue 中比较重要的一部分，源码独立而简短，稍做修改就能够拿出来为你的项目服务， 我已经有在项目中使用了

想必你们写 Vue 项目的时候，应该也有使用过 nextTick

通常我是用在数据渲染完毕以后执行某些操做

this.list =[xx,xx,xx]

this.$nextTick(()=>{    

    this.isLoading=false

})
复制代码

nextTick 按个人理解，就是设置一个回调，用于异步执行

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

可是，每设置一个 nextTick 就新建一个 setTimeout 又不实际，

毕竟一个 setTimeout 是异步，两个setTimeout 也是异步，两个都要等在 同步代码执行完毕以后才执行

那我直接只设置一个 setTimeout 不就行了

---

那一个 setTimeout 怎么执行多个回调呢？

1 存在 回调数组 里。每次调用 nextTick，便往数组里面 push 设置的回调

2 只注册一个 setTimeout，时间为0，用于遍历 回调数组，而后逐个执行子项

3 同步代码执行完毕，setTimeout 天然会执行

---

Vue 不止使用 setTimeout

Vue的 nextTick 也是只用setTimeout 吗，不是的，这里便会涉及到 javascript 的 宏微任务

网上有不少写的很好的关于宏微任务的文章，你们能够去搜索看

关于宏微任务，简单说一下我的理解

1 二者区别在于执行权重的问题，微任务优先级要比宏任务高

2 宏任务 和 微任务 合做完成一个 Event Loop

3 执行一个 宏任务，便会执行一列微任务。接着执行另外一个宏任务...（循环往复，好比一个setTimeout 就是一个宏任务）

Vue 2.4 之前，只使用 微任务，由于微任务执行优先级高

Vue 2.5.3 以后，分红了 宏任务 和 微任务，为了解决连续事件带来的问题，好比冒泡（至于为何，会有一篇文章说明）

Vue 2.6 ，又只使用微任务，由于想到了其余办法解决连续事件的问题

Vue 的 宏微任务 并不算是严格意义上的宏微任务，是种兼容的写法。

一般会作不少判断来选择存在的类型，好比判断 promise 等是否存在，而选择他为微任务类型

可是可能宏微任务最后都是 setTimeout ，由于他是保守兼容处理。这样Vue微任务实际上是宏任务了

---

Vue 使用了 nextTick 进行统一更新

你应该知道，即便在 Vue 中多么频繁地修改数据，最后 Vue 页面只会更新一次

这是 Vue 和 nextTick 合做产生的结果，但又并不仅是 nextTick 起做用

根据响应式原理，你我都知道

【Vue原理】响应式原理 - 白话版

好比

数据 name 被 页面引用，name 会收集到 页面的 watcher

name 被修改时，会通知全部收集到的 watcher 进行更新（watcher.update）

this.name = 2

this.name = 3

this.name = 4
复制代码

若是

name 一时间被修改三次时，按道理应该会通知三次 watcher 更新，那么页面会更新三次

可是最后只会更新一次

就是由于他们的合做

设置 nextTick 回调 + 过滤 watcher

当数据变化后，把 watcher.update 函数存放进 nextTick 的 回调数组中，而且会作过滤。

经过 watcher.id 来判断 回调数组 中是否已经存在这个 watcher 的更新函数

不存在，才 push

以后 nextTick 遍历回调数组，便会执行了更新

因此

当三次修改数据的时候，会准备 push进 回调数组 三个 watcher.update，可是只有第一次是 push 成功的，其余的会被过滤掉

因此，无论你修改多少次数据，nextTick 的回调数组中只存在惟一一个 watcher.update，从而页面只会更新一次