【Vue原理】NextTick - 白话版

684 阅读4分钟

写文章不容易,点个赞呗兄弟 专注 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,从而页面只会更新一次

公众号