3分钟带你了解Vue3的nextTick()
前言
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。简单来说,Vue在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新,nextTick()方法就会在这样的DOM更新循环结束后调用指定的函数。
概念
在 Vue 3 中 nextTick() 方法的行为和 Vue 2 中基本相似,但它进行了一些优化,以提高性能和稳定性。nextTick() 通过利用微任务(microtask)来确保在 DOM 更新之后执行回调,从而避免在同一事件循环中执行 DOM 操作。简单的理解是,当数据更新了,在dom中渲染后,自动执行函数。
方法的使用
nextTick()的基本使用
// 使用 nextTick() 方法
import { ref, nextTick } from 'vue';const myValue = ref('initial value');// 在 DOM 更新后执行回调
nextTick(() => {console.log('DOM 已更新');
});
再onMounted中使用
在该示例中,nextTick() 写onMounted 钩子函数中能确保回调在组件首次挂载后执行,常用于处理与初始渲染相关的逻辑。
// 示例 2: 在 setup() 中使用 nextTick()
import { ref, onMounted, nextTick } from 'vue';export default {setup() {const myValue = ref('initial value');onMounted(() => {// 在 DOM 更新后执行回调nextTick(() => {console.log('DOM 已更新');});});return {myValue,};},
};
nextTick() 的异步执行
nextTick() 中的回调函数是异步执行的。这意味着即使在同一事件循环中调用多次 nextTick(),它们的回调函数也会按照调用顺序异步执行。
// 示例 3: nextTick() 的异步执行
import { ref, nextTick } from 'vue';const myValue = ref('initial value');// 在 DOM 更新后执行第一个回调
nextTick(() => {console.log('第一个回调执行');
});// 在 DOM 更新后执行第二个回调
nextTick(() => {console.log('第二个回调执行');
});
nextTick() 的使用场景
在数据变化后等待DOM更新
这是 nextTick() 最常见的用途。例如,你可能更改了一个数据属性,该属性控制一个元素的可见性。然后你可能想要等待DOM更新以便可以获取该元素的新的宽度或高度。在这种情况下,你可以使用 nextTick() 来确保你的代码在DOM更新后执行。
<template> <div ref="myDiv">{{ message }}</div>
</template> <script>
import { ref, nextTick } from 'vue'; export default { setup() { const message = ref('Hello Vue!'); const myDiv = ref(null); function updateMessage() { message.value = 'Updated!'; nextTick(() => { console.log(myDiv.value.textContent); // 输出: Updated! }); } return { message, myDiv, updateMessage }; }
};
</script>
在创建或销毁组件后等待DOM更新
当创建或销毁Vue组件时,Vue需要时间来更新DOM。如果你需要立即访问新创建或已销毁的DOM元素,你可能会遇到问题,因为DOM可能还没有更新。在这种情况下,你可以使用 nextTick() 来确保你的代码在DOM更新后执行。
<template> <div> <button @click="toggleComponent">Toggle Component</button> <ChildComponent v-if="showChild" ref="childComponentRef" /> </div>
</template> <script>
import { ref, nextTick } from 'vue';
import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, setup() { const showChild = ref(false); const childComponentRef = ref(null);
// 在这个例子中,我们有一个ChildComponent,它根据showChild的值来条件性地渲染。
//当我们点击按钮时,toggleComponent方法会被调用,它切换showChild的值。
//然后,我们使用nextTick()来等待Vue的DOM更新队列清空,确保如果ChildComponent被创建,
//它现在已经被挂载到DOM上;如果它被销毁,它已经从DOM上移除。async function toggleComponent() { showChild.value = !showChild.value; // 等待DOM更新 await nextTick(); if (showChild.value) { // 现在ChildComponent已经被创建并挂载到DOM上 console.log('Child component has been mounted:', childComponentRef.value); } else { // 现在ChildComponent已经被销毁并从DOM上移除 console.log('Child component has been unmounted.'); } } return { showChild, childComponentRef, toggleComponent }; }
};
</script>
在异步更新队列中插入自己的回调
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据,对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用setTimeout(fn, 0) 代替。你可以通过 nextTick() 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。
处理大量数据
在处理大量数据时,Vue.js 可能会变得有点慢,因为它需要时间来处理所有的数据并更新DOM。在这种情况下,你可能想要使用 nextTick() 来分批处理数据,以便给浏览器一些时间来更新DOM。这可以提高应用程序的性能,并减少用户在处理大量数据时的等待时间。
<template> <div> <div v-for="(item, index) in items" :key="index">{{ item }}</div> </div>
</template> <script>
import { ref, nextTick } from 'vue'; export default { setup() { const items = ref([]); function fetchData() { // 假设 fetchDataFromAPI 是一个异步函数,用于从 API 获取数据 fetchDataFromAPI().then(newItems => { items.value = newItems; nextTick(() => { console.log('All items are rendered'); // 这里可以执行依赖于所有项都已渲染的代码 }); }); } return { items, fetchData }; }
};
</script>
与第三方库集成
有些第三方库可能需要直接操作DOM,或者需要在DOM更新后才能正确工作。在这种情况下,你可以使用 nextTick() 来确保在集成这些库时DOM已经更新。例如,你可能想要在使用一个JavaScript动画库之前等待DOM更新,以确保动画在正确的元素上运行。或者你可能想要在使用一个需要测量元素尺寸或位置的库之前等待DOM更新。在这些情况下, nextTick() 可以帮助你确保DOM已经更新并准备好与第三方库集成。
<template> <div ref="myDiv">Some Content</div>
</template> <script>
import { ref, onMounted, nextTick } from 'vue';
import someLibrary from 'some-library'; export default { setup() { const myDiv = ref(null); onMounted(() => { nextTick(() => { // 确保 DOM 已经更新 someLibrary.doSomethingWithElement(myDiv.value); }); }); return { myDiv }; }
};
</script>
相关文章:
3分钟带你了解Vue3的nextTick()
前言 Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。简单来说,Vue在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新ÿ…...
数据库的使用方法
sqlite3 API: 头文件: #include <sqlite3.h> 编译时候要加上-lsqlite3 gcc a.c -lsqlite3 1)sqlite3_open int sqlite3_open(const char *filename, /* Database filename (UTF-8) */ sqlite3 **ppDb /* OUT: SQLite db …...
HTML5和CSS3强化知识总结
HTML5的新特性 HTML5的新增特性主要是针对于以前的不足,增一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。 HTML5新增的语义…...
华为机考入门python3--(13)牛客13-句子逆序
分类:列表 知识点: 列表逆序(和字符串逆序是一样的) my_list[::-1] 题目来自【牛客】 def reverse_sentence(sentence): # 将输入的句子分割words sentence.split() # 将单词逆序排列 words words[::-1] # 将单词用空…...
javaScript实现客户端直连AWS S3(亚马逊云)文件上传、断点续传、断网重传
写在前面:在做这个调研时我遇到的需求是前端直接对接亚马逊平台实现文件上传功能。上传视频文件通常十几个G、客户工作环境网络较差KB/s,且保证上传是稳定的,支持网络异常断点重试、文件断开支持二次拖入自动重传等。综合考虑使用的Aws S3的分…...
从基建发力,CESS 如何推动 RWA 发展?
2023 年 11 月 30 日,Web3 基金会(Web3 Foundation)宣布通过 Centrifuge 将部分资金投资于 RWA(Real World Assets,真实世界资产),试点投资为 100 万美元。Web3 基金会旨在通过支持专注于隐私、…...
qml写一个自适应登录框
1、前言 写一个可自由伸缩的登录框,,(横向上) 关键:给相关控件赋予 Layout.fillWidth: true 属性 即可。 2、代码 //main.qml import QtQuick 2.12 import QtQuick.Controls 2.12 import QtQml 2.12 import QtQuic…...
考研高数(导数的定义)
总结: 导数的本质就是极限。 函数在某点可导就必连续,连续就有极限且等于该点的函数值。 例题1:(归结原则的条件是函数可导) 例题2: 例题3:...
ChatGPT在国际中文教育领域引起的变革与挑战
随着ChatGPT这一先进的自然语言处理模型的出现,教学、学习、测评和辅导的传统方式正在面临可能的重塑。她是否会影响中文教育的未来方向,甚至取代中文教师的角色,成为了许多人热议的话题。本文旨在探讨ChatGPT与中文测评之间的联系࿰…...
C语言—基础数据类型(含进制转换)
进制转换不多,但我觉得适合小白(我爱夸自己嘿嘿) 练习 1. 确认基础类型所占用的内存空间(提示:使用sizeof 运算符): 在这里我说一下,long 类型通常占用 4 字节。在 64 位系统上,long 类型通常也可为 8 字节。 格式…...
警钟长鸣-合同问题
由于去年入职了某家公司,本来想着临时过渡一下,虽然签的时候发现合同和竞业协议存在很明显的问题或者说好听点“限制比较严?”,大部分互联网公司都成了它的假想敌,但是本着来都来了的想法就签了,于是导致发…...
CAN通讯协议学习
介绍 它是一种异步通讯,can_high和can_low两条线利用的是电位差传输信号,抗干扰能力强,但是必须要有can控制器如TJA1050(我的开发板) 当 CAN 节点需要发送数据时,控制器把要发送的二进制编码通过 CAN_Tx 线…...
Spring Boot 笔记 008 创建接口_获取用户信息
1.1.1 编写userinfo接口 1.1.2 User实体类中增加转json忽略password注释 package com.geji.pojo;import com.fasterxml.jackson.annotation.JsonIgnore; import com.fasterxml.jackson.annotation.JsonInclude; import lombok.Data;import java.time.LocalDateTime;//lombok 在…...
EMC学习笔记(二十六)降低EMI的PCB设计指南(六)
降低EMI的PCB设计指南(六) 1.PCB布局1.1 带键盘和显示器的前置面板PCB在汽车和消费类应用中的应用1.2 敏感元器件的布局1.3 自动布线器 2.屏蔽2.1 工作原理2.2 屏蔽接地2.3 电缆屏蔽至旁路2.4 缝隙天线:冷却槽和缝隙 tips:资料主要…...
pytorch花式索引提取topk的张量
文章目录 pytorch花式索引提取topk的张量问题设定代码实现索引方法gather方法验证 补充知识expand方法gather方法randint pytorch花式索引提取topk的张量 问题设定 或者说,有一个(bs, dim, L)的大张量,索引的index形状为(bs, X),想得到一个(…...
Swagger2
Swagger2 引入依赖 <!-- springfox-swagger2 --><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.10.5</version></dependency>编写配置 @Configuration public …...
2024/2/13
数组练习 1、选择题 1.1、若有定义语句:int a[3][6]; ,按在内存中的存放顺序,a 数组的第10个元素是 D A)a[0][4] B) a[1][3] C)a[0][3] D)a[1][4] 1.2、有数组 int a[5] {10,20,30,40&…...
【工具】Android|Android Studio 长颈鹿版本安装下载使用详解
版本:2022.3.1.22, https://redirector.gvt1.com/edgedl/android/studio/install/2022.3.1.22/android-studio-2022.3.1.22-windows.exe 前言 笔者曾多次安装并卸载Android Studio,反复被安卓模拟器劝退。现在差不多是第三次安装,…...
第三代互联网web3.0
Web3.0,通常被称为第三代互联网,代表了互联网技术的下一个演进阶段。它主要基于区块链、去中心化和用户赋权的理念构建,旨在创造一个更加智能、开放且安全的网络环境。以下是Web3.0的一些关键特点: 1. **去中心化**:We…...
FL Studio版本升级-FL Studio怎么升级-FL Studio升级方案
已经是新年2024年了,但是但是依然有很多朋友还在用FL Studio12又或者FL Studio20,今天这篇文章教大家如何升级FL Studio21 FL Studio 21是Image Line公司开发的音乐编曲软件,除了软件以外,我们还提供了FL Studio的升级服务&#…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)
LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 题目描述解题思路Java代码 题目描述 题目链接:LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...
