当前位置: 首页 > news >正文

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 立即变化&#xff0c;而是按一定的策略进行 DOM 的更新。简单来说&#xff0c;Vue在修改数据后&#xff0c;视图不会立刻更新&#xff0c;而是等同一事件循环中的所有数据变化完成之后&#xff0c;再统一进行视图更新&#xff…...

数据库的使用方法

sqlite3 API&#xff1a; 头文件&#xff1a; #include <sqlite3.h> 编译时候要加上-lsqlite3 gcc a.c -lsqlite3 1&#xff09;sqlite3_open int sqlite3_open(const char *filename, /* Database filename (UTF-8) */ sqlite3 **ppDb /* OUT: SQLite db …...

HTML5和CSS3强化知识总结

HTML5的新特性 HTML5的新增特性主要是针对于以前的不足&#xff0c;增一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题&#xff0c;基本是IE9以上版本的浏览器才支持&#xff0c;如果不考虑兼容性问题&#xff0c;可以大量使用这些新特性。 HTML5新增的语义…...

华为机考入门python3--(13)牛客13-句子逆序

分类&#xff1a;列表 知识点&#xff1a; 列表逆序&#xff08;和字符串逆序是一样的&#xff09; my_list[::-1] 题目来自【牛客】 def reverse_sentence(sentence): # 将输入的句子分割words sentence.split() # 将单词逆序排列 words words[::-1] # 将单词用空…...

javaScript实现客户端直连AWS S3(亚马逊云)文件上传、断点续传、断网重传

写在前面&#xff1a;在做这个调研时我遇到的需求是前端直接对接亚马逊平台实现文件上传功能。上传视频文件通常十几个G、客户工作环境网络较差KB/s&#xff0c;且保证上传是稳定的&#xff0c;支持网络异常断点重试、文件断开支持二次拖入自动重传等。综合考虑使用的Aws S3的分…...

从基建发力,CESS 如何推动 RWA 发展?

2023 年 11 月 30 日&#xff0c;Web3 基金会&#xff08;Web3 Foundation&#xff09;宣布通过 Centrifuge 将部分资金投资于 RWA&#xff08;Real World Assets&#xff0c;真实世界资产&#xff09;&#xff0c;试点投资为 100 万美元。Web3 基金会旨在通过支持专注于隐私、…...

qml写一个自适应登录框

1、前言 写一个可自由伸缩的登录框&#xff0c;&#xff0c;&#xff08;横向上&#xff09; 关键&#xff1a;给相关控件赋予 Layout.fillWidth: true 属性 即可。 2、代码 //main.qml import QtQuick 2.12 import QtQuick.Controls 2.12 import QtQml 2.12 import QtQuic…...

考研高数(导数的定义)

总结&#xff1a; 导数的本质就是极限。 函数在某点可导就必连续&#xff0c;连续就有极限且等于该点的函数值。 例题1&#xff1a;&#xff08;归结原则的条件是函数可导&#xff09; 例题2&#xff1a; 例题3&#xff1a;...

ChatGPT在国际中文教育领域引起的变革与挑战

随着ChatGPT这一先进的自然语言处理模型的出现&#xff0c;教学、学习、测评和辅导的传统方式正在面临可能的重塑。她是否会影响中文教育的未来方向&#xff0c;甚至取代中文教师的角色&#xff0c;成为了许多人热议的话题。本文旨在探讨ChatGPT与中文测评之间的联系&#xff0…...

C语言—基础数据类型(含进制转换)

进制转换不多&#xff0c;但我觉得适合小白(我爱夸自己嘿嘿) 练习 1. 确认基础类型所占用的内存空间(提示&#xff1a;使用sizeof 运算符)&#xff1a; 在这里我说一下&#xff0c;long 类型通常占用 4 字节。在 64 位系统上&#xff0c;long 类型通常也可为 8 字节。 格式…...

警钟长鸣-合同问题

由于去年入职了某家公司&#xff0c;本来想着临时过渡一下&#xff0c;虽然签的时候发现合同和竞业协议存在很明显的问题或者说好听点“限制比较严&#xff1f;”&#xff0c;大部分互联网公司都成了它的假想敌&#xff0c;但是本着来都来了的想法就签了&#xff0c;于是导致发…...

CAN通讯协议学习

介绍 它是一种异步通讯&#xff0c;can_high和can_low两条线利用的是电位差传输信号&#xff0c;抗干扰能力强&#xff0c;但是必须要有can控制器如TJA1050&#xff08;我的开发板&#xff09; 当 CAN 节点需要发送数据时&#xff0c;控制器把要发送的二进制编码通过 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设计指南&#xff08;六&#xff09; 1.PCB布局1.1 带键盘和显示器的前置面板PCB在汽车和消费类应用中的应用1.2 敏感元器件的布局1.3 自动布线器 2.屏蔽2.1 工作原理2.2 屏蔽接地2.3 电缆屏蔽至旁路2.4 缝隙天线&#xff1a;冷却槽和缝隙 tips&#xff1a;资料主要…...

pytorch花式索引提取topk的张量

文章目录 pytorch花式索引提取topk的张量问题设定代码实现索引方法gather方法验证 补充知识expand方法gather方法randint pytorch花式索引提取topk的张量 问题设定 或者说&#xff0c;有一个(bs, dim, L)的大张量&#xff0c;索引的index形状为(bs, X)&#xff0c;想得到一个(…...

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、若有定义语句&#xff1a;int a[3][6]; &#xff0c;按在内存中的存放顺序&#xff0c;a 数组的第10个元素是 D A&#xff09;a[0][4] B) a[1][3] C)a[0][3] D)a[1][4] 1.2、有数组 int a[5] {10&#xff0c;20&#xff0c;30&#xff0c;40&…...

【工具】Android|Android Studio 长颈鹿版本安装下载使用详解

版本&#xff1a;2022.3.1.22&#xff0c; https://redirector.gvt1.com/edgedl/android/studio/install/2022.3.1.22/android-studio-2022.3.1.22-windows.exe 前言 笔者曾多次安装并卸载Android Studio&#xff0c;反复被安卓模拟器劝退。现在差不多是第三次安装&#xff0c…...

第三代互联网web3.0

Web3.0&#xff0c;通常被称为第三代互联网&#xff0c;代表了互联网技术的下一个演进阶段。它主要基于区块链、去中心化和用户赋权的理念构建&#xff0c;旨在创造一个更加智能、开放且安全的网络环境。以下是Web3.0的一些关键特点&#xff1a; 1. **去中心化**&#xff1a;We…...

FL Studio版本升级-FL Studio怎么升级-FL Studio升级方案

已经是新年2024年了&#xff0c;但是但是依然有很多朋友还在用FL Studio12又或者FL Studio20&#xff0c;今天这篇文章教大家如何升级FL Studio21 FL Studio 21是Image Line公司开发的音乐编曲软件&#xff0c;除了软件以外&#xff0c;我们还提供了FL Studio的升级服务&#…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...