如何使用vue中的nextTick

Dax 等级 138 0 0

其实这个问题主要就是针对Vue的异步更新队列的理解,因为我们平时用的也比较少,所以很多时候都会忽略掉,但是如果我们在面试当中能比较详细的解答这个问题,那么我相信这应该会是一个闪光点,那话不多说,我们先来捋一下答题思路:

答题思路: nextTick是什么?先来一个定义 为什么需要他呢?异步更新队列实现原理解释 什么地方使用到他呢?描述使用的场景 如何使用他呢?描述使用的具体方法 说一说源码中是怎么实现他的?扩展更深层次源码实现

我们先来看下官方的定义: Vue.nextTick([callback, context]) 定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新之后的DOM1// 修改数据 2vm.msg = 'Hello' 3// DOM 还没有更新 4Vue.nextTick(function () { 5 // DOM 更新了 6})

看完官方的定义,感觉唯一清楚了这个API应该是在修改数据之后立即使用他,其余的感觉还是不太明白,那接下来我们就从实际的案例来看看: 1 2

4 5 6 7 8 Vue面试 9

11 12

13

nextTick的使用

14

{{name}}

** 15 <button @click="changeName">按钮** 16
** 17 36

38

我们可以从上面的案例代码看出,在两个不同的时机输出的结果是不一样的,那为什么会出现这样的情况呢?这个时候我们就需要看看Vue的异步更新策略了,看官网定义: 图片

看到这个官网的异步更新策略我们应该比较容易理解,更新DOM是异步的,侦听到数据变化之后不是立即去改变渲染DOM,而是开启一个队列缓冲在同一个事件循环中发生的所有数据变更,一个Watcher触发多次也只推入队列一次。

那我们是否想过为什么需要这个异步更新策略呢?我们来看一个实际的🌰:

Vue面试

nextTick的使用

{{count}}

我们来看这个地方,如果说Vue没有使用异步更新策略,那我们在调用addCount函数的时候,每循环一次count就要加一,那么每一次都要去执行一遍setter->Dep->Watcher->update->patch这个流程,也就意味着每次加一都要更新一下视图,这明显就不合理,重复的工作极大的消耗了浏览器的性能,所以这就是异步更新策略的必要性了

我们知道了异步更新的必要性,那我们在平时工作中有的时候就有一类需求比如需要在DOM更新之后立马就进行某项操作,那么这个时候nextTick这个API不就用上了吗?现在理解官方定义的前一句话了吧:DOM更新循环结束之后执行延迟回调

前面我们分析了nextTick的定义,必要性以及使用场景等等,接下来我们就升级一下,让我们的答案变得更加有深度,看看源码中nextTick的实现: 源码地址:src/core/util/next-tick.js 在Vue2.x的源码中,这个nextTick部分都是专门单独一个文件的,我们分部分来看 图片

这部分的代码其实并不难理解,在callbacks里面加入我们传入的异步执行的函数,然后使用timerFunc异步方式来调用它们,好了,这里我们发现出现了一个新的名词:timerFunc——异步调用方式,这是什么呢?我们继续看源码文件

图片 看这段源码我们就知道了,timerFunc就是通过检测当前环境的不同来使用不同的实现方式,我们看这个if代码块,发现其实就是按照Promise——>MutationsObserver——>setImmediate——>setTimeout的优先级顺序来实现的,那为什么要按照这个顺序呢?

其实我们应该知道前两者Promise和MutationsObserver的回调函数都会在microtask中执行,它们会比后两者macrotask先执行,所以优先考虑前两者的实现,除非所处环境不支持,最后才会降级成最后的setTimeout

图片

最后一部分源码也贴上,我们去调试可以知道,其实这就是我们在项目中调用的nextTick函数,这里就不过多解释了。

OK,到这里我们今天要分析的Vue中的nextTick有关问题我们就看的差不多了,最后我们来一个比较完整的回答总结: nextTick是Vue提供的一个全局API,由于Vue的异步更新策略导致对数据的修改不会立即体现在DOM变化上,此时如果我们需要立即获取到变化后的DOM的状态,就需要使用这个API(定义+使用场景) Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。nextTick方法会在队列中加入一个回调函数,确保该函数在前面的DOM操作完成之后再调用(必要性) 在callbacks里面加入我们传入的函数,然后用timerFunc的异步方式调用它们,首选是Promise方式(源码层面剖析)

预览图
收藏
评论区
守株待兔
最新文章
js高频手写大全 2021-04-12 14:58
JS核心原理理解闭包 2021-04-06 09:50
veux的使用 2021-03-25 14:43

导读