Javascript时间循环应用—nextTick()详解

2024-06-12 21:28

本文主要是介绍Javascript时间循环应用—nextTick()详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

简单易懂 关于nextTick()的理解-CSDN博客

【Vue面试专题】56道经典Vue面试题详解!说说nextTick使用和原理?_哔哩哔哩_bilibili

7046bf4b04964b2aa5b8739718bb77eb.png

Vue.nextTick()

是 Vue.js 提供的一个全局 API,用于在 DOM 更新后执行延迟回调。它通常用于在数据更新后立即获取更新后的 DOM 状态。了解 nextTick 可以帮助你更好地控制 DOM 更新的时机和顺序,避免在未更新的 DOM 上执行操作。

 基本用法

callback 是一个函数,会在 DOM 更新完毕后执行。

Vue.nextTick(callback);

 使用场景

  • 等待 DOM 更新完成:有时你会在数据变化后立即执行某些操作,但此时 DOM 可能还没有更新完毕。nextTick 确保你的代码在下一次 DOM 更新循环结束后运行。
  • 避免布局抖动:在一次操作中多次更新数据和操作 DOM,可能会导致多次布局抖动(reflow/repaint)。使用 nextTick 可以将这些操作合并到一次更新中,提高性能。
  • 获取更新后的 DOM:有时需要在数据变化并更新 DOM 后立即操作 DOM 元素,例如滚动到某个位置、设置焦点等。
<div id="app"><div ref="message">{{ message }}</div><button @click="updateMessage">Update Message</button>
</div><script>
new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {updateMessage() {this.message = 'Hello World!';Vue.nextTick(() => {console.log(this.$refs.message.textContent); // 'Hello World!'});}}
});
</script>

在这个示例中,当 updateMessage 方法被调用时,message 数据发生变化,DOM 将进行更新。通过 Vue.nextTick() 确保在 DOM 更新完成后访问 DOM 元素并打印新的文本内容。

  • 在Vue组件中使用
<div id="app"><child-component></child-component>
</div><script>
Vue.component('child-component', {template: '<div ref="child">Child Component</div>',mounted() {this.$nextTick(() => {console.log(this.$refs.child.textContent); // 'Child Component'});}
});new Vue({el: '#app'
});
</script>

在这个示例中,$nextTick 是 Vue 组件实例方法,用法与全局 Vue.nextTick 类似。它在组件 DOM 挂载后执行回调函数。

 核心原理

事件循环:

JavaScript 是单线程的,执行过程中存在一个事件循环机制。事件循环负责将任务(Tasks)按照顺序执行,分为宏任务(Macro Task)和微任务(Micro Task)。常见的宏任务有 setTimeout、setInterval,微任务有 Promise.then、MutationObserver 等。

浏览器工作原理与Javascript高级(前后端异步)-CSDN博客

事件循环(Event Loop)-CSDN博客

工作机制

  1. 执行一个宏任务(如从任务队列中取一个任务并执行)。
  2. 执行所有的微任务(如从微任务队列中取所有任务并执行)。
  3. 更新渲染(如果需要)。
  4. 重复(回到步骤 1)。

图解

440f830a7f0f434fa66d1166f2980bf9.gif

09512e6460dd416f9807adaa8d9861a9.gif

示例代码

以下是一个包含宏任务和微任务的示例代码,帮助理解它们的执行顺序:

console.log('script start');setTimeout(() => {console.log('setTimeout');
}, 0);Promise.resolve().then(() => {console.log('Promise 1');
}).then(() => {console.log('Promise 2');
});console.log('script end');
script start
script end
Promise 1
Promise 2
setTimeout

执行顺序:

  1. 同步任务:首先执行所有同步代码,即宏任务队列中的初始任务。
    • console.log('script start');
    • console.log('script end');
  2. 微任务:然后执行微任务队列中的所有任务。
    • Promise.resolve().then(() => console.log('Promise 1'));
    • Promise.then(() => console.log('Promise 2'));
  3. 宏任务:最后执行宏任务队列中的任务。
    • setTimeout(() => console.log('setTimeout'), 0);​​​​​​​

任务队列

事件循环维护两个队列,宏任务队列和微任务队列。每次执行完一个宏任务后,都会清空微任务队列中的所有任务。当一个宏任务执行完毕后,事件循环会检查微任务队列,并执行所有的微任务,然后再执行下一个宏任务。

 

701c9dfa017c4910924e6c31cccfe5ed.png

​​​​​​​

 

 

这篇关于Javascript时间循环应用—nextTick()详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

MySQL 主从复制部署及验证(示例详解)

《MySQL主从复制部署及验证(示例详解)》本文介绍MySQL主从复制部署步骤及学校管理数据库创建脚本,包含表结构设计、示例数据插入和查询语句,用于验证主从同步功能,感兴趣的朋友一起看看吧... 目录mysql 主从复制部署指南部署步骤1.环境准备2. 主服务器配置3. 创建复制用户4. 获取主服务器状态5

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

Redis中Stream详解及应用小结

《Redis中Stream详解及应用小结》RedisStreams是Redis5.0引入的新功能,提供了一种类似于传统消息队列的机制,但具有更高的灵活性和可扩展性,本文给大家介绍Redis中Strea... 目录1. Redis Stream 概述2. Redis Stream 的基本操作2.1. XADD

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建