Vue06/Vue中this.$nextTick( ) 的用法及详细介绍

2023-11-08

一.$nextTick

语法:

this.$nextTick( 箭头函数体 )

 

作用: this.$nextTick这个方法作用是当数据被修改后使用这个方法 回调函数获取更新后的dom再渲染出来

注意:

1.data改变,更新DOM是异步的

2.获取更新后的DOM方法 this.$nextTick(() => { 需要更新的DOM } )

说明: 

1.$nextTick是一个异步微任务,等待当前函数的dom渲染结束后执行

2.$nextTick 类似于一个非常高级的定时器 自动追踪DOM更新 更新好了就触发

应用场景:

DOM更新是异步的 Vue 响应式的特征  修改数据后 页面会自动更新 而更新DOM这个操作是异步的  

这个时候使用 this.$nextTick( 回调函数 ) 回调函数会在下一次 DOM更新完毕后执行

详细:

1.this.$nextTick 将回调延迟到下次DOM更新循环之后执行 在修改数据之后立即使用他 

2.this$nextTick 跟全局方法 vue.nextTick一样 不同的是 回调的this 自动绑定到调用他的实列上

3.总的来说 假设我们更改了某个dom元素内部的文本,而这时候我们想直接打印这个更改之后的文本是需要 dom更新之后才会实现的 就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中

介绍: 

vue在修改数据后 视图(DOM)不会立刻更新,而是等同一事件循环中的所有数据变化完成之后 在统一进行视图更新 所以 在修改数据更新立马读取DOM是获取不到新数据的 , 获取到的原来的DOM函数

使用newxtTick 可以获得DOM更新后的数据 在下次DOM更新之后vue会回调nextTick指定的函数 可以在修改数据之后立即使用这个nextTick方法 在指定的函数里获取更新后的DOM

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue06/Vue中this.$nextTick( ) 的用法及详细介绍 的相关文章

  • angularjs:如何向资源对象添加缓存?

    在 http 中添加缓存非常简单 通过传递cache true http docs angularjs org api ng http https docs angularjs org api ng service 24http有缓存选项
  • React-native:将场景绑定到导航栏

    我正在整理这个提问 回答应用程序 并遇到了这个障碍 我想从导航栏触发场景中的功能 与登录应用程序类似 我在导航栏中有一个用于提交答案的按钮 RightButton route navigator index navState if rout
  • 仅当表单已提交时才触发 jQuery 表单验证?

    不引人注目的验证基于这样的想法 don t进行表单验证 直到用户提交表单 一旦发生这种情况 如果表单上的某些内容无效 那么一旦用户更改了每个字段 就会立即验证它 我想做的是 不显眼地 触发表单元素的验证 也就是说 only如果用户已尝试提交
  • 如何更改传单中功能集的样式?

    我正在看等值区域的例子 https leafletjs com examples choropleth https leafletjs com examples choropleth 这是他们使用的数据源 type Feature prop
  • Angular 2 链式 Promise 并传递拒绝

    应该是一个简单的问题 但是我找不到有关如何做到这一点的文档 像这样链接一个承诺 Making a promise no problem let promise new Promise resolve reject gt let data d
  • 访问sendBeacon发送的数据

    文档表明sendBeacon通过发送其数据HTTP POST request 但在 PHP 中 POST变量似乎是一个空数组 这是我的 JavaScript 代码 navigator sendBeacon beacon log php My
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • 使用 moment.js 检查输入日期是否为星期一

    好吧 我想检查日期是否是星期一 例如 var myDate new Date moment myDate DD MM YYYY dayIs monday 在我的国家 一周的第一天是星期一 所以 我真的想检查输入日期是否是一周的开始 我尝试使
  • 如何按照编写的顺序迭代 javascript 对象属性

    我发现了代码中的一个错误 我希望通过最少的重构工作来解决该错误 此错误发生在 Chrome 和 Opera 浏览器中 问题 var obj 23 AA 12 BB iterating through obj s properties for
  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • 如何在 Angular 中从父组件访问子组件?

    I have mat paginator在子组件a中 如下所示 子组件 html
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • 当用户单击链接时,如何记录 MixPanel 事件?

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是
  • 如何在 javascript 正则表达式中匹配平衡分隔符?

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an
  • 如何在打字稿文件中导入没有定义文件的js库

    随着我们的项目变得越来越大 我想从 JavaScript 切换到 TypeScript 以帮助进行代码管理 然而 我们使用许多库作为 amd 模块 我们不想将其转换为 TypeScript 我们仍然想将它们导入 TypeScript 文件
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

  • Git配置credential helper,并使用Http/Https传输

    现实场景 在使用Git进行开发的时候 我们可以使用ssh url或者http url来进行源码的clone push pull 二者的区别是 使用ssh url需要在本地配置ssh key 这也就意味着你必须是开发者或者有一定的权限 每次的
  • 这些错误你都犯过吗?来看看9大XMind初学者常见错误!

    当我们在思考一个事件时 我们往往会将自己的想法通过思维导图的方式展现出来 XMind就是一款强大的思维导图和头脑风暴工具 数十年来一直是百万用户的首选 gt gt 点击下载Mind ZEN试用版 lt lt 对于初学者来说 常常会犯一些固有
  • TypeC规范--CC连接

    上次在TypeC与PD快充文章内我们在后面放了几张图 如下图 上图位于TypeC规范章节4 5 1 3 3 我们以这个图为例介绍一下 我们可以看到在VBus上会有MOS去切换source和sink的通路 这个是DRP在VBUS上的特点 我们
  • Entity Framework Core系列教程-26-数据迁移

    Entity Framework Core数据迁移 迁移是一种通过保留数据来使数据库架构与EF Core模型保持同步的方法 如上图所示 EF Core API从域 实体 类构建EF Core模型 并且EF Core迁移将基于EF Core模
  • Ubuntu获取串口权限使用CAN分析仪

    Ubuntu获取串口权限使用CAN分析仪 通过以下命令获取usb设备信息 lsusb 可以得到以下信息 Bus 002 Device 001 ID 1d6b 0003 Linux Foundation 3 0 root hub Bus 00
  • Linux Maven-v3.8.6的安装与配置

    Maven v3 8 6的安装与配置 官网下载页地址 maven依赖jdk环境 且需要 jdk1 7 以上版本 安装之前需要先配置好 JAVA HOME 的环境变量 有需要可以看之前的 JDK 11的安装与环境变量配置 1 下载 解压 wg
  • 2023华为OD机试真题【查找单入口空闲区域/回溯法】

    题目描述 给定一个 m xn 的矩阵 由若干字符 和0构成 X表示该处已被占据 0 表示该处空闲 请找到最大的单入口空闲区域 解释 空闲区域是由连通的O组成的区域 位于边界的0可以构成入口 单入口空闲区域即有目只有一个位于边界的0作为入口的
  • 教你从零开始搭建私有网盘及个人博客(云服务器基础使用教程)

    云服务器选择 首先 你必须购买一个的服务器 不过你可以到阿里云的 高校学生 在家实践 计划 http suo im 5sMWSq 中免费领取6个月的云服务器先试试手 选配服务器和选配个人电脑差不多 所以配置方面不多提 我们直接看到 镜像 选
  • Threejs加载OBJ模型

    threejs加载OBJ模型代码
  • 2014年6月23日-6月29日(共11小时,剩4424小时)

    6月23日 上午有事 下午1小时 剩4438小时 6月24日 3小时 剩4435小时 6月25日 5小时 剩4430小时 6月26日 1小时 剩4429小时 6月27日 3小时 剩4426小时 6月29日 2小时 剩4424小时
  • 论文笔记:When Do Contrastive Learning Signals Help Spatio-TemporalGraph Forecasting?

    2022 SigSpatial 1 intro 1 1 背景 论文认为数据稀缺是阻碍时空图 STG 预测的一个关键问题 在这一领域的公共数据集通常只包含几个月的数据 限制了可以构建的训练实例数量 gt 学习模型可能会对训练数据过拟合 导致泛
  • Redis的这些都没有掌握,你还想要拿Offer?

    Redis 简介 Redis 是完全开源免费的 遵守 BSD 协议 是一个高性能的 key value 数据库 Redis 与 其他 key value 缓存产品有以下三个特点 Redis 支持数据持久化 可以将内存中的数据保存在磁盘中 重
  • 反爬虫策略的应对方法汇总

    现在越来越多的工作需要用到爬虫程序 但是同时也有很多人会通过爬虫程序恶意竞争 因此为了能够保护自己的正当权益 各种反爬虫程序被研发利用起来 所以很多时候 在进行爬虫工作的时候首要面对的就是爬虫和反爬虫的拉锯战 这里就说一下常见的防爬虫策略和
  • c语言排序之冒泡排序升序的使用详解

    在c语言中实现冒泡排序 简介 冒泡 这个名字的由来是因为越大的元素会经由交换慢慢 浮 到数列的顶端 故名 冒泡排序应该是最常见的排序方法了 c语言初学者一定要学会使用 冒泡排序 BubbleSort 的基本概念是 依次比较相邻的两个数 将小
  • OpenCV中RotatedRect的角度问题与平行判定

    OpenCV中RotatedRect的角度问题与平行判定 在运用OpenCV的过程中 想对两个细窄长方形进行平行判定 但是因为RotatedRct的角度问题 走了很多弯路 RotatedRect OpenCV中 以左上角角点为O点 竖直向下
  • Nginx 部署 Django Python虚拟环境创建 傻瓜教程

    这里不讨论uwsgi 与 nginx之间的关系 但是建议学习 通俗说 Nginx就是可以让你的网页支持更多请求时保证负载均衡 简单的网页用uwsgi部署配合django runserver也可以达到要求 所以从负载能力是 Nginx gt
  • 浮点数在计算机中存储方式

    C语言和C 语言中 对于浮点类型的数据采用单精度类型 float 和双精度类型 double 来存储 float数据占用32bit double数据占用64bit 我们在声明一个变量float f 2 25f的时候 是如何分配内存的呢 如果
  • 什么是软件测试?零基础入门知识要点总结篇,5分钟带你快速了解

    1 什么是软件测试 软件测试 英语 Software Testing 描述一种用来促进鉴定软件的正确性 完整性 安全性和质量的过程 换句话说 软件测试是一种实际输出与预期输出之间的审核或者比较过程 通俗的来讲 软件测试 就是软件测试人员验证
  • 如何使用 Flask 和 GPT-4 API 创建人工智能驱动的 Python Web 应用程序

    欢迎来到 Web 开发的未来 人工智能 AI 正在彻底改变我们创建在线应用程序并与之交互的方式 在这篇博文中 我们将向您介绍使用 Flask 网络框架和 OpenAI 最先进的 GPT 4 API 创建尖端的人工智能 Python 网络应用
  • Vue06/Vue中this.$nextTick( ) 的用法及详细介绍

    一 nextTick 语法 this nextTick 箭头函数体 作用 this nextTick这个方法作用是当数据被修改后使用这个方法 回调函数获取更新后的dom再渲染出来 注意 1 data改变 更新DOM是异步的 2 获取更新后的