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定义优势具体说明心电图卷积层搭建 到目前为止,你使用的所有神经网络层都是密集层类型,这…

用快代理换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…

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

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

Spring篇----第十四篇

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

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

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

超详细的Python字典讲解

一、概念 1.定义 字典是另一种可变容器模型&#xff0c;且可存储任意类型对象。是可变数据类型 字典类型的创建 1.字典的每个键值key>value对用冒号:分隔&#xff0c;每个键值对之间用逗号,分割&#xff0c;整个字典包括在花括号{}中 d {key1:value1,key:value} 2.使…

不是詹姆斯了?皮蓬改口称乔丹是他的GOAT

NBA直播吧-nba直播在线观看免费高清直播录像回放NBA直播吧是一个专业NBA直播在线观看免费直播平台&#xff0c;专业提供nba直播免费高清在线观看中文jrs无插件直播&#xff0c;NBA录像回放&#xff0c;CBA直播&#xff0c;WNBA以及篮球直播&#xff0c;足球直播五大联赛等最新直…

蓝桥杯-常用STL(三)

常用STL &#x1f388;1.映射&#x1f388;2.map的基础使用&#x1f52d;2.1引入库&#x1f52d;2.2构造一个映射&#x1f52d;2.3插入一对映射&#x1f52d;2.4判断关键字是否存在&#x1f52d;2.5遍历映射&#x1f52d;2.6清空 &#x1f388;1.映射 &#x1f50e;映射是指两个…

Pycharm环境中,python为变量赋值的时候,如何自动添加空格?

在python中&#xff0c;为变量赋值的时候&#xff0c;如果没有加入空格&#xff0c;代码底部会有灰色波浪线&#xff0c;说明不符合Python规范。 可以在菜单栏选择code&#xff0c;reformat code。重新格式化代码&#xff0c;所有代码会自动格式化。 快捷方式为&#xff1a;ct…

数据库JSON类型到映射JAVA上

Mysql存放JSON数据如何映射JAVA实体类 概述&#xff1a;最近写在写SKU模块中&#xff0c;需要表中字段存放JSON类型数据&#xff0c;mybatis-plus在查询的时候如何跟JSON类型所匹配呢&#xff1f;再次记录一下。 直接上代码&#xff0c;后面有解释到底如何映射上的。 Mysql表…

UV-K5

该方法是安装到python的安装目录了&#xff0c;建立项目的时候勾选 Inherit globel site-packages (使用全局的站点包) &#xff0c;就能调用安装路径的包文件环境。 cmd进入Dos窗口安装 pyserial 模块&#xff1a; pip install pyserial

阿里巴巴中国站获得公司档案信息 API 返回值说明

一、应用场景 阿里巴巴中国站获得公司档案信息 API接口的应用场景可以包括但不限于以下几种情况&#xff1a; 1、企业信息查询&#xff1a;API接口可用于查询企业的基本档案信息&#xff0c;如企业名称、注册地址、法定代表人、经营范围等。这些信息对于了解企业背景、信用状…

手机和windows的便签怎么共享账号使用

在忙碌的生活中&#xff0c;我经常需要在手机和电脑之间同步记事信息。可是&#xff0c;每次当我在手机上记下一些重要事项后&#xff0c;想要在电脑上查看或继续编辑时&#xff0c;总是遇到各种麻烦。因为手机和电脑上的便签软件各不相同&#xff0c;无法实现账号共享和内容同…

从0到1实现五子棋游戏!!

Hello&#xff0c;好久不见宝子们&#xff0c;今天来给大家更一个五子棋的程序~ 我们今天要讲的内容如下&#xff1a; 文章目录 1.五子棋游戏介绍1.1 游戏玩法介绍&#xff1a; 2.准备工作2.1 具体操作流程 3.游戏程序主函数4.初始化棋盘4.1.定义宏变量4.2 初始化棋盘 5.打印…