Vue NextTick工作原理及使用场景

$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.mzph.cn/news/708902.shtml

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

相关文章

springboot集成quartz定时任务并接入后台管理系统(copy即用)

说明:项目启动后会根据设置的时间进行执行,业务代码根据自己的需求更改,数据库文件在最后(记得清空数据库哦~)这里需要注意的一点就是className字段表示的是下面的对应的DynamicTask的路径如:com.example.demo.quartz.task.DynamicTask,如有多个定时任务copy并更改Dynam…

团结引擎——DotNet Wasm方案

参考:团结引擎 DotNet WebAssembly(Wasm) 介绍 一、当前编译流程 通过IL2CPP将C#转成C/C;通过Emscripen将C/C转成WebAssembly; 二、 当前存在问题 IL2CPP在处理类似泛型、反射结构时,由于缺少运行时信息,必须全量生…

程序员面试技巧分享

目录 前言1 自我介绍的艺术1.1 简明扼要1.2 强调独特之处1.3 项目亮点突显1.4 结合公司文化 2 技术问题回答的技巧2.1 明确问题理解2.2 结构清晰的回答2.3 强调解决问题的方法 3 团队协作经验的展示3.1 共享成功经验:3.2 强调沟通和解决冲突的能力: 结语…

基础!!!吴恩达deeplearning.ai:卷积层

以下内容有任何不理解可以翻看我之前的博客哦:吴恩达deeplearning.ai专栏 文章目录 回顾——密集层 Dense Layer卷积层 Convolutional Neural Network定义优势具体说明心电图卷积层搭建 到目前为止,你使用的所有神经网络层都是密集层类型,这…

HarmonyOS | 状态管理(六) | LocalStorage(页面级UI状态存储)

系列文章目录 1.HarmonyOS | 状态管理(一) | State装饰器 2.HarmonyOS | 状态管理(二) | Prop装饰器 3.HarmonyOS | 状态管理(三) | Link装饰器 4.HarmonyOS | 状态管理(四) | Provide和Consume装饰器 5.HarmonyOS | 状态管理(五) | Observed装饰器和ObjectLink装饰器 文章目录…

该类型的 CollectionView 不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改。

报错原因 在异步的时候,调用了其他异步,导致UI工程线程该变了数据源,所以只需要将线程变为原始的UI线程。 解决方案 await QueuedTask.Run(() > { Application.Current.Dispatcher.Invoke(() >{报错的代码,…

红外测温仪芯片方案开发设计

红外测温仪由光学系统、光电探测器、信号放大器及信号处理、显示输出等部分组成。光学系统汇集其视场内的目标红外辐射能量,视场的大小由测温仪的光学零件以及位置决定。被测物体辐射的红外首先进入测温仪的光学系统,再由光学系统汇聚射入的红外线&#…

【探索AI】十 深度学习如何入门

深度学习概念 深度学习是一种机器学习的方法,通过构建和训练多层神经网络来解决复杂的模式识别和决策任务。以下是与深度学习相关的一些基本概念: 神经网络:神经网络是由大量的人工神经元(节点)组成的计算模型。它们通…

前端程序员如何使用GPT

前端程序员如何使用GPT GPT自述 GPT(Generative Pre-trained Transformer)是一种基于深度学习的自然语言处理模型,它在近年来取得了非常显著的成果。许多前端程序员也开始尝试使用GPT来提升工作效率和创造力。那么,前端程序员如何…

python学习笔记-内置类型

Python内置类型是Python编程语言中自带的基本数据类型,它们用于存储和处理数据。其中包括数字、序列、映射、类、实例和异常等主要类型。 在这些内置类型中,有一些是可变的,它们具有修改自身内容的能力,比如添加、移除或重排成员…

用快代理换Ip爬取boss直聘招聘信息

import requests import random from prettytable import PrettyTable tb PrettyTable() tb.field_names [区域,详情页链接,领导,经营领域,公司名,招聘人数,学历要求,工作经验要求,职位名称,期望薪资,技能要求,福利]headers {"User-Agent":"Mozilla/5.0 (Win…

跳跃游戏Ⅱ

问题 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - …

独立分体式比例阀控制器

比例阀放大器的主要作用是对比例阀进行控制&#xff0c;它产生所需的电信号&#xff0c;并对这些信号进行综合、比较、校正和放大。这样的设备通常包括稳压电源、颤振信号发生器等&#xff0c;以确保比例阀能够准确地响应控制指令。外置模块式的设计使得这种放大器可以方便地与…

windows系统下安装RabbitMQ

一、RabbitMQ安装软件资源准备 因为RabbitMQ是Erlang语言开发的&#xff0c;因此安装Erlang环境在进行安装RbbitMQ的操作&#xff0c;选择两者版本时一定要参考版本的兼容性 1.RabbitMQ国内下载地址&#xff0c;因官网下载比较缓慢&#xff0c;还是国内的稍微快些 https://r…

Kubernetes IoTDB系列 | IoTDB数据库同步|IoTDB数据库高可用

目录 一、介绍二、应用场景三、IoTDB 数据库搭建四、修改同步配置文件1、配置接收端的参数2、配置发送端的参数五、启动同步功能发送端六、测试一、介绍 IoTDB 数据库同步是指将一个节点的数据复制到其他节点,以确保数据的冗余和可用性。在分布式环境中,数据同步是保证系统高…

【日常聊聊】程序员的金三银四

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 方向一&#xff1a;面试技巧分享 方向二&#xff1a;面试题解析 方向三&#xff1a;公司文化解读 方向四&#xff1a;职业规…

【Vision Pro 应用】Spatialty Coffee:探索咖啡制作的全新维度

Spatialty Coffee,一个引领咖啡文化潮流的应用程序,为用户提供了一个全新的平台,用以浏览和发现最佳的滤过咖啡配方。这款应用不仅满足了咖啡爱好者对于高品质咖啡的追求,同时也为那些希望提升咖啡制作技巧的人提供了有力的支持。 1.广泛支持的滤过咖啡制作器 Spatialty …

Spring篇----第十四篇

系列文章目录 文章目录 系列文章目录前言一、介绍一下 WebApplicationContext二、什么是 spring?三、使用 Spring 框架的好处是什么?四、Spring 由哪些模块组成?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,…

数据结构:链队

一、定义两个结构体 定义两个结构体,一个结构体是结点的结构体&#xff0c;一个结构体是保留指向对头结点和队尾结点指针的结构体 #ifndef __LINK_QUEUE_H__ #define __LINK_QUEUE_H__ #include <stdio.h> #include <stdlib.h>typedef struct link_node{int data…

android studio Unable to download file ‘xxx‘ in offline mode.

如果网络连接正常&#xff0c;但是报这个错&#xff0c;说明开启了离线模式&#xff0c;关掉就行了。 "toggle offline mode" 意思是切换到离线模式 点击右上角的Gradle&#xff0c;然后关闭倒数第二个图标。