每日十题---三

1. Vue中$nextTick原理

1. 简单的理解就是它就是一个setTimeout函数,将函数放到异步后去处理

2. Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。

3. 也就是说我们在设置this.msg = 'some thing'的时候,Vue并没有马上去更新DOM数据,而是将这个操作放进一个队列中;如果我们重复执行的话,队列还会进行去重操作;等待同一事件循环中的所有数据变化完成之后,会将队列中的事件拿出来处理。

4. 这样做主要是为了提升性能,因为如果在主线程中更新DOM,循环100次就要更新100次DOM;但是如果等事件循环完成之后更新DOM,只需要更新1次。

$nextTick源码理解:

1. 把回调函数放入callbacks等待执行

2. 将执行函数放到微任务或者宏任务中

3. 事件循环到了微任务或者宏任务,执行函数依次执行callbacks中的回调

再回到我们开头说的setTimeout,可以看出来nextTick是对setTimeout进行了多种兼容性的处理,宽泛的也可以理解为将回调函数放入setTimeout中执行;不过nextTick优先放入微任务执行,而setTimeout是宏任务,因此nextTick一般情况下总是先于setTimeout执行

$nextTick()返回一个Promise对象

nextTick原理

methods: {updateMessage: function () {this.message = '已更新'console.log(this.$el.textContent) // => '未更新'this.$nextTick(function () {console.log(this.$el.textContent) // => '已更新'})}
}
//因为 $nextTick() 返回一个 Promise 对象,
//所以你可以使用新的 ES2017 async/await 语法完成相同的事情:
methods: {updateMessage: async function () {this.message = '已更新'console.log(this.$el.textContent) // => '未更新'await this.$nextTick()console.log(this.$el.textContent) // => '已更新'}
}

 

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

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

相关文章

海外仓代发系统选择标准:功能稳定和性价比高一个都不能少

对海外仓来说,一件代发基本都是比较核心的业务。不过这个核心业务现在的竞争确实也比较大,对海外仓企业而言,想在一件代发上做到让客户满意,还是需要多方面努力的。 一方面,需要自己的仓库管理模式足够标准化&#xf…

高校实验室危险化学品及重大危险源安全管理系统

高校实验室危险化学品及重大危险源安全管理的重要性: 保障师生安全:通过严格管理,可以有效地降低这些风险,确保师生在实验室内的安全。 确保实验教学质量:良好的危化品管理能够确保实验材料的准确性和可靠性&#xff0…

SwiftUI 利用 Swizz 黑魔法为系统创建的默认对象插入新协议方法(一)

功能需求 在 SwiftUI 的开发中,我们往往需要借助底层 UIKit 的“上帝之手”来进一步实现额外的定制功能。比如,在可拖放(Dragable)SwiftUI 的实现中,会缺失一些关键的回调方法让我们这些秃头码农们“欲哭无泪” 如上图所示,我们在拖放取消时将界面中的一切改变都恢复如初…

2024永久免费版CorelDRAW安装包下载附CDR2024激活码序列号

CorelDRAW2024作为一款备受关注的图形设计软件,其最新版本集成了一系列创新工具和功能,旨在提升设计师和艺术家的工作效率与创作自由度。这一版本在用户界面设计、矢量图绘制、色彩管理和文件支持等方面都进行了更新,吸引了广泛的关注。本文将…

目标检测基础初步学习

目标检测(Object Detection) 目标检测任务说明 在动手学习深度学习中对目标检测任务有如下的描述。 图像分类任务中,我们假设图像中只有一个主要物体对象,我们只关注如何识别其类别。 然而,很多时候图像里有多个我们…

【C++软件调试技术】什么是pdb文件?如何使用pdb文件?哪些工具需要使用pdb文件?

目录 1、什么是pdb文件? 2、如何配置生成pdb文件? 3、pdb文件的时间戳和文件名称 3.1、pdb文件的时间戳 3.2、pdb文件的文件名称 4、有pdb文件才能在Visual Studio中调试代码 5、在Windbg中使用pdb文件 5.1、使用lm命令查看二进制文件的时间戳&a…

翻译《The Old New Thing》- Why do atoms start at 0xC000?

Why do atoms start at 0xC000? - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20080429-00/?p22543 Raymond Chen 2008年04月03日 有两种类型的原子,即所谓的整数原子,它们只是一些小整数,还有就是没有…

GE的六西格玛是怎么成功的?

六西格玛作为一种先进的质量管理方法,旨在通过消除缺陷、提高流程效率来降低成本、增强客户满意度。GE作为最早采用六西格玛的公司之一,其成功的原因首先离不开高层领导对精益六西格玛理念的坚定支持和推动。公司高层不仅亲自参与培训和项目实践&#xf…

何为云防护?有何作用

云防护又称云防御。随着Internet互联网络带宽的增加和多种DDOS 黑客工具的不断发布,云计算越演越热,DDOS拒绝服务攻击的实施越来越容易,DDOS攻击事件正在成上升趋势。出于商业竞争、打击报复和网络敲诈等多种因素,导致很多IDC 托管…

一分钟了解香港的场外期权报价

香港的场外期权报价 在香港这个国际金融中心,场外期权交易是金融市场不可或缺的一部分。场外期权,作为一种非标准化的金融衍生品,为投资者提供了在特定时间以约定价格买入或卖出某种资产的机会。对于希望参与这一市场的投资者来说&#xff0…

电脑记事本怎么恢复之前的内容记录

每个人都曾有过这样的时刻——在记事本上精心记录下的重要内容,一不小心就被删除了。那种心情,仿佛一瞬间从山顶跌落到谷底,无尽的懊悔涌上心头。我也曾遭遇过这样的困境,那些消失的文字对我来说意义非凡,它们的丢失仿…

基于小波变换贝叶斯LMMSE估计的图像降噪方法(MATLAB 2018)

自从小波被发现以来,由于其优良的时频局部化性能,大大解决了信号与图像降噪的难题。利用小波降噪大致有三种方法,分别是基于小波模极大值原理、基于小波变换系数的相关性,和最为常用的小波阈值函数法。 基于小波模极大值降噪 该…

AI程序员来了,大批码农要失业

根据GitHub发布的《Octoverse 2021年度报告》,2021年中国有755万程序员,排名全球第二。 ChatGPT的出现,堪比在全球互联网行业点燃了一枚“核弹”,很多人都会担心“自己的工作会不会被AI取代”。 而2024年的AI进展速度如火箭般&am…

S4 BP 维护

前台输入Tcode:BP 问候填写金税开票信息使用的开户行名称,注释填写金税开票信息使用的开户行代码 屏幕下滑按需填写其他数据,如:街道2,街道3,街道/门牌号,街道4,街道5,区域,邮编、城市、国家、地区、语言,电话(发票地址里的电话(必须是客户开票资料里提供的电话,会…

【MyBatisPlus】MyBatisPlus条件查询

【MyBatisPlus】MyBatisPlus条件查询 文章目录 【MyBatisPlus】MyBatisPlus条件查询1、查询条件方式2、组合条件3、NULL值处理4、查询投影-设置【查询字段、分组】5、查询条件6、字段映射与表名映射问题导入 1、查询条件方式 MyBatisPlus将书写复杂的SQL查询条件进行了封装&…

JSON 数据格式化方法

文章目录 数据介绍IDE 或脚本格式化在线工具网址总结 数据介绍 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript 编程语言的一个子集。尽管它起源于 JavaScript,但 JSON 已经成为了一个完全独立于…

2024专精特新趋势论坛,汉王友基分享数字化创新实践之路

5月31日,由深圳市中小企业服务局作为指导单位,36氪主办的“WISE新风向2024专精特新趋势论坛”在粤港澳大湾区顺利举办。 汉王友基作为国家级专精特新“小巨人”企业代表,受邀参加此次大会,企业CTO邓立明先生进行了《数字赋能&…

让企业自己掌握数据主权,可道云teamOS让企业数据私有化不再是难题,让企业数据更安全、更可控

越来越多的企业开始意识到,仅仅依赖公共云存储服务可能无法满足其对于数据安全性的高标准要求。 毕竟每年都会有不同程度的数据泄露问题爆出,导致大家在使用企业网盘的时候也总是惴惴不安。一旦数据泄露或被非法获取,企业将面临巨大的经济损…

geotrust泛域名https600元

泛域名https证书,也可以称之为通配符https证书,是开发者用来保障网站安全、提升用户信任度的方案之一。开发者可以使用泛域名https证书为多个网站进行数据加密以及身份认证服务,提升网站的安全性。今天就随SSL盾小编了解geotrust旗下的泛域名…

如何理解 Java 线程的概念及线程的创建和管理,包括 Runnable 接口和 Thread 类

多线程编程是现代软件开发中的重要技术,能够显著提高程序的效率和响应速度。Java 提供了丰富的多线程编程支持,使开发者可以轻松地创建和管理线程。 1. 线程的基本概念 1.1 进程与线程 进程:是操作系统中独立运行的程序,每个进…