10 分钟了解 nextTick ,并实现简易版的 nextTick

前言

在 Vue.js 中,有一个特殊的方法 nextTick,它在 DOM 更新后执行一段代码,起到等待 DOM 绘制完成的作用。本文会详细介绍 nextTick 的原理和使用方法,并实现一个简易版的 nextTick,加深对它的理解。

一. 什么是 nextTick

简单的说,nextTick 方法是在 Vue.js 中常见的一种异步更新 DOM 的机制。它的原理是利用 JavaScript 的事件循环机制以及浏览器的渲染流程来实现延迟执行 DOM 更新操作。

它的出现主要是为了解决 Vue 的异步更新导致的 DOM 更新后的操作问题。

在 Vue 中,数据的变化会触发重新渲染 DOM,但实际上,Vue 的数据更新是异步的。也就是说,当我们修改了 Vue 实例的数据后,并不会立即进行 DOM 更新,而是在下一个事件循环中才会进行。

这个异步更新机制的设计是为了优化性能。Vue 会对进行多次数据变化进行合并,然后在下一个事件循环中进行一次性的 DOM 更新,从而减少不必要的 DOM 操作,提高性能。

然而,由于异步更新的机制,有时候可能在修改数据后需要立即执行一些 DOM 操作,例如获取到更新后的 DOM 元素、更新后的样式计算、触发一些特定事件等。这时候就需要使用 nextTick 方法了。

nextTick 方法是 Vue 提供的一个实用工具,它能够将回调函数延迟到下一个 DOM 更新循环之后执行。也就是说,通过 nextTick 方法,我们可以确保在 DOM 更新完成后执行某些操作。

使用 nextTick 方法经常用来解决以下问题:

  • 获取更新后的 DOM 元素

  • 更新后的样式计算

  • 触发一些特定事件

综上所述,nextTick 的出现解决了 Vue 的异步更新机制导致的 DOM 更新后的操作问题,使我们能够在正确的时机执行对应的操作,提高开发效率和灵活性。

二. 实现原理

具体而言,当我们在代码中使用 nextTick 方法时,框架会将待更新的 DOM 操作推入一个队列中,然后在当前 JavaScript 任务执行完成之后,利用宏任务微任务(具体取决于框架和浏览器实现)的机制进行执行,以确保代码逻辑执行完成后再去操作 DOM。

这样的设计能够确保在当前 JavaScript 运行环境中的任何同步操作完成之后才进行 DOM 的更新,以避免因为 DOM 更新带来的重排或重绘可能导致的性能问题。同时,通过使用异步更新机制,还能够更好地管理大量 DOM 更新的情况,优化渲染性能。

需要注意的是,虽然 nextTick 方法通常被封装在框架中使用,但在一些现代浏览器中也可以直接使用原生的 Promise 或 MutationObserver 等来实现类似的异步更新效果。具体实现方式可能会根据不同的框架和浏览器而有所不同。

nextTick 方法会在下一次 DOM 更新循环结束后执行一个回调函数。这样我们就能确保在操作 DOM 元素之前,DOM 已经更新完成。它通过一些异步的技术来实现,确保回调函数被添加到队列中,并在下一个 tick 执行。

三. 使用场景

下面是我们在日常开发中,几个使用 nextTick 方法的应用场景:

1. 操作更新后的 DOM

当需要对更新后的 DOM 进行操作时,在使用 Vue.js 或其他类似框架的情况下,可以将 DOM 操作代码包裹在 nextTick 的回调函数中。这样可以确保 DOM 更新已经完成,并且在下一个 「DOM 更新循环」 中执行操作,避免出现操作未生效的问题。

html

<template> <div class="is-pd-50"> <p>消息:{{ message }}</p> <el-button type="primary" @click="updateMessage">更新消息</el-button> </div> </template> <script> export default { data() { return { message: '原始消息' } }, methods: { updateMessage() { this.message = '更新后的消息' // 消息更新后立即输出 DOM 信息 this.getText() this.$nextTick(() => { // 在 nextTick 的回调函数输出 DOM 信息 this.getText() }) }, getText() { // 操作更新后的 DOM const messageElement = document.querySelector('p') // 输出:更新后的消息 console.log(messageElement.textContent) } } } </script>

注意:以上的代码仅用于示例作用,在Vue中不建议直接操作 DOM 元素

当点击 「更新消息」 按钮时,updateMessage 方法会将 message 的值更新为 「更新后的消息」。在 $nextTick 的回调函数中,我们可以通过选择器获取到更新后的 DOM 元素,并进行相应的操作。

2. 异步更新后的操作

当需要在 DOM 更新后执行一些异步操作时,如在表单数据更新后提交表单、在列表数据更新后进行滚动定位等,可以在 nextTick 回调函数中触发相应的异步操作。这样可以保证在下一个事件循环周期中执行操作,以确保更新已经完成。

html

<template> <div class="is-pd-20"> <button @click="updateItems">更新列表</button> <ul> <li v-for="item in items" :key="item.id" class="item">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { items: [] } }, created() { // 生成 10 个 li 元素 this.items = Array.from({ length: 10 }, (item, index) => { return { id: index + 1, name: `Item ${index + 1}` } }) }, methods: { updateItems() { // 异步更新数据 setTimeout(() => { // 新加入一个元素 li this.items.push({ id: this.items.length + 1, name: `Item ${this.items.length + 1}` }) this.$nextTick(() => { // 在更新后的 DOM 中进行滚动定位到最后一个 li 元素 const lastItem = document.querySelector('li.item:last-child') lastItem.scrollIntoView({ behavior: 'smooth' }) }) }, 1000) } } } </script>

当点击 「更新列表」 按钮时,updateItems 方法会通过异步操作向 items 数组中添加新的项。在 $nextTick 的回调函数中,我们可以在 DOM 更新后将最后一个项滚动到可视区域。

通过以上两个示例,我们可以看到 nextTick 的应用场景,其中关键就是将需要在 DOM 更新后进行操作的代码放在 nextTick 的回调函数中,以确保更新已经完成。同时,可以结合异步操作来优化用户体验或性能。

四. 如何实现一个简易版的 nextTick

当我们在 Vue 中自己实现一个类似 $nextTick 的方法时,可以考虑使用 JavaScript 的 Promise 和 MutationObserver 来模拟其行为,下面我们具体来看一下吧:

js

// 自定义的 $nextTick 方法 Vue.prototype.$myNextTick = function () { return new Promise((resolve) => { if (typeof MutationObserver !== "undefined") { // 使用 MutationObserver 监听 DOM 变化 let observer = new MutationObserver(resolve); let textNode = document.createTextNode("1"); observer.observe(textNode, { characterData: true, }); textNode.textContent = "2"; } else { // fallback 方案,使用 setTimeout 模拟异步 setTimeout(resolve, 0); } }); };

  1. 首先,我们在 Vue.prototype 上添加了一个名为 $myNextTick 的方法。通过在 prototype 对象上添加该方法,我们可以在 Vue 的实例上使用 $myNextTick 方法。

  2. Vue.prototype.$myNextTick 方法内部返回了一个 Promise 对象。通过返回 Promise 对象,我们可以使用 .then 或 async/await 语法来处理 Promise 的解析。

  3. 在方法的 Promise 回调函数中,我们首先检查当前环境是否支持 MutationObserverMutationObserver 是一个用于异步监听 DOM 变化的 API。

  4. 如果当前环境支持 MutationObserver,我们会创建一个 MutationObserver 实例,并将它的回调函数设置为 resolve。我们创建了一个文本节点,并将其添加到 DOM 中,然后通过修改文本节点的内容来触发 DOM 变化。当 DOM 变化时,MutationObserver 的回调函数 resolve 就会被调用。

  5. 如果当前环境不支持 MutationObserver,我们将使用 setTimeout 来模拟异步操作。我们使用一个 0 毫秒的延迟来确保 resolve 在下一个事件循环中执行,模拟了异步的效果。

完成了简易版$nextTick后,下面看一下如何使用 $myNextTick 吧:

javascript

// 示例组件 new Vue({ el: "#app", data() { return { message: "Hello, Vue!", }; }, methods: { updateMessage() { this.message = "Updated Message"; this.$myNextTick().then(() => { console.log("DOM 已更新"); // 在 DOM 更新后进行其他操作 }); }, }, });

在这个示例中,当点击按钮时,会调用 updateMessage 方法,该方法会将 message 的值更新为 「Updated Message」。然后通过 $myNextTick 方法返回的 Promise 对象来确保在 DOM 更新之进行其他操作。

通过这样的实现,我们可以在 Vue 组件中使用 $myNextTick 方法来执行在 DOM 更新后的操作,类似于 Vue 原生的 $nextTick 方法的效果。

注意,这只是一种模拟实现,其目的为了加深对 Vue 版 $nextTick 的理解,代码可能无法完全复制 Vue 原生的 $nextTick 的行为。因此,在实际开发中,建议还是使用 Vue 提供的内置 $nextTick 方法来保证更准确和可靠的 DOM 更新后操作。

五. 注意事项

在使用 nextTick 方法时,需要注意以下几点:

  • nextTick 方法是一个实例方法,在 Vue 组件中可以直接使用,但在其他地方需要通过 Vue 实例来调用,例如:this.$nextTick()

  • nextTick 方法是异步的,回调函数会在下一次 DOM 更新循环结束后执行,因此并不是立即执行的。

  • nextTick 方法支持使用 Promise 或返回 Promise 的函数来进行链式调用。

 

仅供参考,如有抄袭请告知!!! 

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

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

相关文章

猫头虎分享已解决Bug || Web服务故障:WebServiceUnavailable, HTTPServerError

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

ubuntu常见配置

ubuntu各个版本的安装过程大差小不差&#xff0c;可以参考&#xff0c;ubuntu20.04 其它版本换一下镜像版本即可 安装之后需要配置基本的环境&#xff0c;我的话大概就以下内容&#xff0c;后续可能有所删改 sudo apt-get update sudo apt-get install gcc sudo apt-get inst…

exit()、_exit()和_Exit()终止程序运行

目录 1、exit() 函数 2、_exit() 函数 3、_Exit() 函数 在Linux系统下&#xff0c;你可以使用 exit()、_exit() 和 _Exit() 来终止程序运行&#xff0c;特别是在出现错误或执行失败的情况下。这样可以确保程序在发生严重错误时能够安全地退出。 1、exit() 函数 用法&#…

vulnhub靶场之Deathnote

一.环境搭建 1.靶场描述 Level - easy Description : dont waste too much time thinking outside the box . It is a Straight forward box . This works better with VirtualBox rather than VMware 2.靶场下载 https://www.vulnhub.com/entry/deathnote-1,739/ 3.启动环…

网络安全“降本增笑”的三大帮手

在网络安全这个快速变化和危机四伏的领域中&#xff0c;通过使用正确的工具和方法&#xff0c;我们可以在工作中取得更高的效率&#xff0c;并降低相关成本。 雷池社区版 雷池社区版—开源Web应用防火墙。这款产品凭借强大的规则引擎&#xff0c;它允许用户自定义安全策略&…

洛谷p1002过河卒

[NOIP2002 普及组] 过河卒 题目描述 棋盘上 A A A 点有一个过河卒&#xff0c;需要走到目标 B B B 点。卒行走的规则&#xff1a;可以向下、或者向右。同时在棋盘上 C C C 点有一个对方的马&#xff0c;该马所在的点和所有跳跃一步可达的点称为对方马的控制点。因此称之为…

设计模式(行为型模式)解释器模式

目录 一、简介二、解释器模式2.1、抽象表达式接口2.2、表达式2.3、使用 三、优点和缺点 一、简介 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为设计模式&#xff0c;用于解释特定语言或处理特定问题领域的语法或表达式。它定义了一种语言的语法表示&#…

三防平板丨三防工业平板电脑丨三防平板电脑有哪些优势?

三防平板电脑通常使用特殊材料和制造工艺来达到防水、防尘、防摔的目的&#xff0c;这样可以在极端条件下使用&#xff0c;并保证设备的稳定性和可靠性。因此&#xff0c;三防平板电脑适用于各种恶劣环境&#xff0c;如户外野营、物流、工业制造等应用场景。那么相比于普通消费…

Pregnostic®–PE IIp ELISA,用于测量人源ESM-1水平

Pregnostic PE Pregnostic是由IQ Products公司开发的重点关注女性健康的产品线。其中的Pregnostic -PE项目&#xff0c;旨在开发有助于筛查孕期先兆子痫风险的产品&#xff0c;可用于区分早发性和晚发性先兆子痫。 ESM-1 内皮细胞特异性分子&#xff08;ESM-1&#xff09;&am…

BabylonJS 6.0文档 Deep Dive 动画(一):动画介绍

1. 动画介绍 无论动画如何实现&#xff0c;它都必须考虑所需的动作、时间、产生所需流动性所需的帧数以及序列中的关键点。这个介绍应该有助于理解Babylon.js是如何进行动画的&#xff0c;以及它们是如何实现的。 动画由一系列图像、帧生成&#xff0c;这些图像、帧一个接一个地…

【Spring底层原理高级进阶】基于Spring Boot和Spring WebFlux的实时推荐系统的核心:响应式编程与 WebFlux 的颠覆性变革

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《Spring 狂野之旅&#xff1a;底层原理高级进阶》 &#x1f680…

QT_day2

1.思维导图 2.使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff…

幻兽帕鲁1.4.1单机畅玩教程

文章目录 游戏简介游戏背景游戏玩法资源安装和配置教程游戏包的下载和安装Steam客户端下载和配置 毕业存档使用教程第一步&#xff1a;个人存档备份第二步&#xff1a;毕业存档导入 游戏简介 Palworld&#xff1a;一款由日本独立游戏工作室Pocketpair制作发行的动作角色扮演游…

LaunchPad 市场的复苏,Penpad 成新兴生力军

以 Fair Launch 为主要启动方式的铭文市场的爆发&#xff0c;推动了 LaunchPad 市场的复苏&#xff0c;绝多数所铭文项目都能通过 Fairr Launch 的方式筹集资金实现启动&#xff0c;该赛道的爆发不仅推动了数百亿美元的热钱开始在链上不断涌动&#xff0c;同时也进一步形成了新…

【xss跨站漏洞】xss漏洞利用工具beef的安装

安装环境 阿里云服务器&#xff0c;centos8.2系统&#xff0c;docker docker安装 前提用root用户 安装docker yum install docker 重启docker systemctl restart docker beef安装 安装beef docker pull janes/beef 绑定到3000端口 docker run --rm -p 3000:3000 janes/beef …

JS实现根据数组对象的某一属性排序

JS实现根据数组对象的某一属性排序 一、冒泡排序&#xff08;先了解冒泡排序机制&#xff09;二、根据数组对象的某一属性排序&#xff08;引用sort方法排序&#xff09; 一、冒泡排序&#xff08;先了解冒泡排序机制&#xff09; 以从小到大排序为例&#xff0c;冒泡排序的原…

【EI会议征稿通知】第十届能源材料与环境工程国际学术会议(ICEMEE 2024)

第十届能源材料与环境工程国际学术会议&#xff08;ICEMEE 2024&#xff09; 2024 10th International Conference on Energy Materials and Environment Engineering 随着前9年的成功&#xff0c;ICEMEE在2024年迎来了第10届。很荣幸地宣布&#xff0c;第十届能源材料与环境…

养老项目技术架构和工程结构

数据层&#xff1a;MySQL、Redis 服务层&#xff1a;SpringBoot、SpringMVC、SpringCache结合Redis的缓存、定时任务XXL-JOB、和swagger配合使用生成接口文档的Knife4j、Lombok、双向通信使用的WebSocket以及Spring Security 接入层使用的nginx——反向代理、负载均衡 前端使…

【rust】vscode下rust-analyzer和Rust Test Lens的Lens

背景 一个粉丝问&#xff1a; 我编辑的launch.json为什么只在按F5的时候工作 按这个debug按钮就不工作&#xff1f; 那在哪改这个插件的配置文档&#xff1f;我一直用的F5 今天上午才注意到这个问题&#xff0c;比如怎么改程序的命令行参数&#xff0c;我意思是如果我非要用…

搭建sql-labs靶机环境

phpstudy&#xff08;小皮面板&#xff09; 先下载phpstudy&#xff08;小皮面板&#xff09;软件&#xff0c;方便我们快速搭建环境&#xff0c;该软件程序包集成最新的ApachePHPMySQLngix,一次性安装,无须配置即可使用,是非常方便、好用的PHP调试环境.该程序不仅包括PHP调试…