摘要：通常会做很多判断来选择存在的类型，比如判断等是否存在，而选择他为微任务类型但是可能宏微任务最后都是，因为他是保守兼容处理。
写文章不容易，点个赞呗兄弟
专注 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 不止使用 setTimeoutVue的 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，从而页面只会更新一次
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110261.html
写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】NextTick - 源码版 之 服务Vue 初次看的兄弟可以先看 【Vue原理】NextTick - 白话版 简单了解下...
摘要：这么讲，有点笼统，准确地说，应该是事件回调执行过程中，在主线程为空之后，异步代码执行之前，所有通过注册的异步代码都是用宏任务。 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【...
摘要：尽量把所有异步代码放在一个宏微任务中，减少消耗加快异步代码的执行。我们知道，如果一个异步代码就注册一个宏微任务的话，那么执行完全部异步代码肯定慢很多避免频繁地更新。中就算我们一次性修改多次数据，页面还是只会更新一次。 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5...
摘要：所以我今后打算把每一个内容分成白话版和源码版。有什么错误的地方，感谢大家能够指出响应式系统我们都知道，只要在实例中声明过的数据，那么这个数据就是响应式的。什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 V...
摘要：如果没有缓存，我们将不可避免的多次执行的现在我们要开始讲解，是如何判断是否使用缓存的首先计算后，会把计算得到的值保存到一个变量中。当使用缓存时，就直接返回这个变量。 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或...
阅读 1249·2023-04-26 01:38
阅读 1461·2021-11-15 11:39
阅读 3250·2021-09-22 15:43
阅读 2635·2019-08-30 15:55
阅读 2045·2019-08-30 14:17
阅读 2850·2019-08-29 14:16
阅读 3061·2019-08-26 18:36
阅读 2606·2019-08-26 12:19
