callback用法 js vue_vue 基础- nextTick 的使用场景

淩亂°似流年 2023-01-03 06:15 78阅读 0赞

![cbda60f68e9042e29e5cf79157116140.png][]

# 前言 #

> 《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。(里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读)

在开发时，是不是遇到过这样的场景，响应数据明明已经更新，但无法通过 dom 获取到。最后使用 nextTick 方法“包裹”后就能拿到。如果你不太清楚其中的原因，这篇或许能解开你的疑惑。

# 先来看个例子 #

这个例子很简单，主要来测试 nextTick 的作用。

定义了一个异步数据获取的方法 asyncDataFetch ，你可以把它当成一个接口请求，在执行 updateMsg 后，调用该方法，并最后通过 $refs 的方式来获取页面上的文本。

![dc35bc1b0295227a2c9545adeedbb6a3.png][]

页面模板

![5b71b0da0cc5d1dd3671cab54afc2c8f.png][]

js 逻辑

虽然我们已经把接口返回的数据赋值给 this.asyncData ,但实际却没有在 $refs 中获取到 (html-2)。

从调试 console 中看到，其在 nextTick 方法中(html-3)被成功获取。

![bcddf4692d5fa9a30fb45204428a35de.png][]

console 输出

# 异步更新队列 #

> 为什么例子中，明明把数据赋值给响应对象，但 html-2 中却没有更新呢？

这其实要回到 **vue 异步更新队列** 的解释中，查看原因。

虽然我们通过 this.someData = ‘new value’ 执行了赋值，但该响应数据并不是同步响应到页面模板中(即更新到页面 Dom 里)。

vue 更新 Dom 是一个异步过程，所以即使我们看到页面的渲染虽然被“刷新”了，但其实并不是数据一刷新，页面就被刷新，这尤其需要我们注意。

在这个异步队列中，vue 会根据不同的“异步” api 的支持情况来选择以最佳的方式执行 tick 。这些 api 包括：Promise、MutationObserver、setImmdiate、setTimeout。如果你了解浏览器的事件循环机制，将会对理解这个异步队列容易许多。

# nextTick #

好，知道 vue 中数据的更新时异步这一个概念后，那么为什么在 nextTick 执行相关代码能达到预期效果就基本知道大概了。

如下是一段 nextTick 相关源码片段，你可以在 vuesrccoreutilext-tick.js 找到：

![dba6b4a47fee28b687ce7e7877b4c49b.png][]

源码

它会有什么作用呢？

一旦调用了 nextTick ，就会把我们定义的 callback 函数方法推到 callbacks 这样一个全局变量中，这个 callbacks 就是 **异步更新队列**。

然后会执行 timerFunc 一个异步 tick 方式封装。

如果当前客户端不支持 Promise、MutationObserver 等 api 方法时，将采用 setTimeout 后备方式：

![d6c441fbe825566feb0273b7a11e881e.png][]

setTimout 方式

当 vue 开始执行更新相关操作时，通过 flushCallbacks 方法来“清空”这个队列，内部执行每个队列元素：

![0cfb0b7e5586610e7290f0e360f677d7.png][]

源码

由于操作 dom 的成本非常高， vue 在数据 watch 层做了优化来处理整个过程的计算操作。

# 总结 #

说了为何使用 nextTick 能解决开发中一些“奇怪”的问题，并抛出 vue 的异步事件队列这个概念来解释这个原因。

# 关于我 #

一位“前端工程师”，乐于实践，并分享前端开发经验。

如果有问题或者想法，欢迎各位评论留言，愿大家共同进步。

关注【前端雨爸】，查阅更多前端技术心得。

[cbda60f68e9042e29e5cf79157116140.png]: /images/20221119/b4866ddbfc984b23b7bfe81bfc129374.png
[dc35bc1b0295227a2c9545adeedbb6a3.png]: /images/20221119/749bfb3748c340f193bfe9faaf9fc82b.png
[5b71b0da0cc5d1dd3671cab54afc2c8f.png]: /images/20221119/a91c497e3d85407ca5121b750817e14a.png
[bcddf4692d5fa9a30fb45204428a35de.png]: /images/20221119/fae3ada3e63c4cdca333c7a2ef33313c.png
[dba6b4a47fee28b687ce7e7877b4c49b.png]: /images/20221119/38077837b66e4c968ff337739f140724.png
[d6c441fbe825566feb0273b7a11e881e.png]: /images/20221119/8dad46dc09034c78b30228033a61b491.png
[0cfb0b7e5586610e7290f0e360f677d7.png]: /images/20221119/7b0e966fc21e4f539db34186b59fae3a.png