Vue NextTick工作原理及使用场景

news2025/7/13 5:21:22

$nextTick的定义及理解:

定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;

理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,

什么时候需要用的this.nextTick()

Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。

当项目中你想在改变DOM元素的数据后基于新的dom做点什么,对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中;通俗的理解是:更改数据后当你想立即使用js操作新的视图的时候需要使用它

先来回顾下nextTick的使用,因为 Vue 的响应式变量是异步更新DOM的,所以当你变量修改的时候,并不能第一时间拿到最新的 DOM,而在nextTick中就可以拿到最新的 DOM

注意事项

$nextTick 是一个异步方法,它会等待当前的同步代码块执行完毕后才执行回调函数,以确保在 DOM 更新后执行。
在大多数情况下,Vue.js 会在数据变化后异步执行 DOM 更新,所以在大多数情况下,你不必手动使用 $nextTick。然而,在一些特殊情况下,比如在 v-for 中使用 v-if,手动使用 $nextTick 可能是必要的。
如果你在多个地方修改了数据,而希望在数据全部更新后执行回调函数,可以将多个回调函数包装在一个 Promise 中,然后使用 Promise.all。

先问是不是,再问为什么
很多人认为 nextTick = 微任务,这其实是错的,正确应该是 nextTick 优先是 微任务,不信可以直接看 Vue 的源码

在src\core\util\next-tick.ts 文件中,可以看到 nextTick 优先级如下:

  • Promise.resolve().then:微任务
  • MutationObserver:宏任务
  • setImmediate:宏任务
  • setTimeout:宏任务
    图片

所以说 nextTick 只是优先选择微任务而已,当浏览器不支持微任务的时候,它还是会选择宏任务

为啥优先微任务?
2023年面试了怎么也得有100个人了,大部分都不能比较好的回答这个问题:nextTick为啥优先选择微任务?

首先声明一个点:Vue 的异步更新DOM 其实也是微任务,比如下面的例子,你一次性更新了三次变量,其实会生成三个更新DOM微任务到队列中

图片

你这个时候放一个 nextTick 在后面,那就是在三个微任务后面再放一个微任务而已

图片

我们都知道微任务是在UI渲染之前执行的,那为什么 nextTick 能拿到最新的 DOM 呢?

图片

更新 ≠ 渲染
其实我们要明白一个点:更新 ≠ 渲染,前面三个更新微任务只是更新DOM,修改的是DOM树,而使用 document.getElementById这类方法去获取到的就是DOM树的内容

图片

所以 nextTick 为什么是微任务,但是能获取到最新DOM呢?因为到了 nextTick 这一步的时候,DOM树已经更新完了,只是还没渲染到页面上而已,而我们能通过DOM的一些API去获取到最新的DOM树内容,比如 document.getElementById 这类方法

所以,与其说 nextTick 能获取到最新的DOM,还不如说 nextTick 能获取到最新的DOM树信息.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1477260.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GitHub标星50k的Android全栈技术知识,成为一名合格Android架构师

JNI 简介 JNI (Java Native Interface英文缩写),译为Java本地接口。是Java众多开发技术中的一门技术,意在利用本地代码,为Java程序提供更高效、更灵活的拓展。尽管Java一贯以其良好的跨平台性而著称,但真正…

js 面试运行机制和存储(从以下几方面理解),栈和堆的理解

1 工作原理 每个浏览器都有自己的引擎,通过引擎把代码解析运行起来。 2 生命周期 3-1 内存分配 3-2 内存使用 3-3 内存回收 3 栈和堆的理解 timer也是个函数--所以也是引用类型。 4 如何运行 以下可忽略 首先声明变量,放在左侧栈中执行,在执行…

FPGA-时钟管理单元

时钟管理单元(Clock Management Tile, CMT) : 即时钟管理片,是FPGA器件中一个十分重要的时钟资源。能够对内部和外部的时钟去偏斜、去抖动,同时还支持频率合成、分倍频等功能。 举例,下面这个例子数据从FIFO输出时钟频率为125MHZ,这个时钟频率可以通过…

Redis冲冲冲——Redis的主从复制,哨兵模式以及SpringBoot的配置

目录 引出Redis的主从复制,哨兵模式以及SpringBoot的配置Redis的主从复制Redis的哨兵模式SpringBoot配置 缓存三兄弟:缓存击穿、穿透、雪崩缓存击穿缓存穿透缓存雪崩 总结 引出 Redis冲冲冲——Redis的主从复制,哨兵模式以及SpringBoot的配置…

Taro React ---- 在函数组件或类组件中访问上下文(Context)中的值

1. 解决问题的场景 项目是开发好几年了,当时采用的是类组件开发。现在新增需求,新增需求使用的函数组件,组件涉及的层级比较多,如果直接组件传值,比较麻烦。但是单独为这次的需求新增 redux 的引入又觉得没必要。然后在…

优化照片分辨率:如何将照片调整为150dpi,以适应不同场景?

在数字化时代,我们经常需要在不同场景中使用照片,如打印、网页发布、社交媒体分享等。然而,不同场景对于照片的分辨率要求各不相同。有时,我们需要将照片的分辨率调整为特定数值,例如150dpi(每英寸点数)。这样做可以确…

flutter面试题及答案,android面试题最新

前言 今天想停下代码,写点脑袋里不断浮现出来的一些看法。 也就是最近在微博和知乎上老看到“互联网寒冬”的说法。要么是看到啥公司薪水无法如期发放了,要么是看到别人说什么“裁员了,没有交接,签字然后电脑还了就走人&#xf…

【JavaEE进阶】 Spring AOP快速上手

文章目录 🍃什么是AOP🌳什么是Spring AOP🌴上手Spring AOP🚩引入依赖🚩编写AOP程序 ⭕总结 🍃什么是AOP AOP是Aspect Oriented Programming的简称(又称为面向切⾯编程) 什么是面向…

【k8s 访问控制--认证与鉴权】

1、身份认证与权限 前面我们在操作k8s的所有请求都是通过https的方式进行请求,通过REST协议操作我们的k8s接口,所以在k8s中有一套认证和鉴权的资源。 Kubenetes中提供了良好的多租户认证管理机制,如RBAC、ServiceAccount还有各种策路等。通…

练习 1 Web EasySQL极客大挑战

CTF Week 1 EasySQL极客大挑战 BUUCTF 典中典复习 Web SQL 先尝试输入,找一找交互页面 check.php 尝试万能语句 a’ or true SQL注入:#和–的作用 get传参只能是url编码,注意修改编码,输入的字符串要改成url格式。 POST请求和…

定制红酒:定制过程中的沟通与调整,确保满足您的需求

在云仓酒庄洒派的定制红酒服务中,沟通与调整是确保满足消费者需求的关键环节。为了提供上好的服务,云仓酒庄洒派非常重视与消费者的沟通,并根据他们的反馈进行调整,以确保产品符合他们的期望。 首先,在定制过程中&…

Fastjson2 <== 2.0.26反序列漏洞

根据Y4TACKER师傅在2023-03-20发布了一篇关于Fastjson原生反序列化的文章,文章中引入注目的是利用条件限制条件,不常常关注漏洞预警或者内容的几乎都是未发觉Fastjson2 到Fastjson2 2.0.26版本都有问题,其实如果单独去使用一些关键词去搜索&a…

linux系统---nginx基础

目录 一、Nginx的概念 二、Nginx常用功能 1、HTTP(正向)代理,反向代理 1.1正向代理 1.2 反向代理 2、负载均衡 2.1 轮询法(默认方法) 2.2 weight权重模式(加权轮询) 2.3 ip_hash 3、web缓存 三、基础特性 四…

【深度优先搜索】【图论】【推荐】332. 重新安排行程

作者推荐 动态规划的时间复杂度优化 本文涉及知识点 深度优先搜索 图论 LeetCode332. 重新安排行程 给你一份航线列表 tickets ,其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从 JFK&a…

flutter通知栏,写得太好了

【1面 - 基础面】 你们 Android 开发的时候,对于 UI 稿的 px 是如何适配的? dpi:屏幕像素密度,指的是在系统软件上指定的单位尺寸的像素数量,它往往是写在系统出厂配置文件的一个固定值;ppi:也…

骨传导耳机什么牌子的好?揭秘成功法则与避坑策略

科技进步带来了骨传导耳机的兴起,这种耳机以其独特的优势而受到越来越多消费者的青睐。与传统的入耳式相比,骨传导耳机通过骨头传递声音,避免了对耳道的直接压迫,减少了对听力的潜在伤害。同时它们允许用户在享受音乐的同时&#…

Python并发编程:多线程与多进程的区别

一 谁的开启速度快 1. 在主进程下开启线程 1 2 3 4 5 6 7 8 9 from threading import Thread def work(): print("hello") if __name__ __main__: t Thread(targetwork) t.start() print("主线程/主进程") 执行结果如下&#xff1a…

十分钟三个步骤给百万级数据Excel多人同时导出添加排队导出功能,避免干崩服务器

业务场景 考虑到数据库数据日渐增多,导出会有全量数据的导出(甚至有的时候数据百万级),多人同时导出可以会对服务性能造成影响,导出涉及到mysql查询的io操作,还涉及文件输入、输出流的io操作,所…

算法day02_209.长度最小的子数组

推荐阅读 从零开始学数组:深入浅出,带你掌握核心要点 初探二分法 再探二分法 目录 推荐阅读209.长度最小的子数组题目思路解法暴力解法队列相加法(滑动窗口)对列相减法(滑动窗口) 系统的纪录一下刷算法的过…

特斯拉一面算法原题

来自太空的 X 帖子 埃隆马斯克(Elon Musk)旗下太空探索技术公司 SpaceX 于 2 月 26 号,从太空往社交平台 X(前身为推特,已被马斯克全资收购并改名)发布帖子。 这是 SpaceX 官号首次通过星链来发送 X 帖子&a…