如何使用vue中的nextTick

Dax
• 阅读 1375

其实这个问题主要就是针对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方式(源码层面剖析)

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这