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>

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

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

相关文章

第五篇【传奇开心果系列】vant开发移动应用示例:深度解读高度可定制

传奇开心果博文系列 系列博文目录Vant 开发移动应用示例系列 博文目录前言一、Vant高度可定制的重要作用二、样式定制介绍和示例代码三、组件定制介绍和示例代码四、组件库定制介绍和示例代码五、主题定制介绍和示例代码六、语言环境定制介绍和示例代码七、资源加载定制介绍和示…

网络层DoS

网络层是OSI参考模型中的第三层&#xff0c;介于传输层和数据链路层之间&#xff0c;其目的 是实现两个终端系统之间数据的透明传送&#xff0c;具体功能包括&#xff1a;寻址和路由选择、连 接的建立、保持和终止等。位于网络层的协议包括ARP 、IP和ICMP等。下面就 ICMP为例&…

创建一个VUE项目(vue2和vue3)

背景&#xff1a;电脑已经安装完vue2和vue3环境 一台Mac同时安装vue2和vue3 https://blog.csdn.net/c103363/article/details/136059783 创建vue2项目 vue init webpack "项目名称"创建vue3项目 vue create "项目名称"

diffusers单机多卡推理(全网首发)

起因 博主在部署InstantID项目时&#xff0c;显存不够&#xff0c;想要将模型分散在多张卡上。 翻到这篇发现是分布式推理&#xff0c;博主一直以为这个可以达到我想要的效果&#xff0c;但是效果是多线程并行推理&#xff0c;并不能将一个模型切片在多个GPU上。 Distributed …

一起玩儿物联网人工智能小车(ESP32)——57. SPI总线协议初探(一)

摘要&#xff1a;介绍SPI总线的基本知识 前面已经学习过IIC总线协议&#xff0c;今天开始介绍另一个总线协议——SPI。SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外设接口&#xff09;是由Motorola提出的一种高速、全双工、同步的通信总线。并且在芯片的管脚…

TI的电量计驱动在卸载时导致Linux卡死

背景 最近移植TI电量计芯片bq40z50的驱动&#xff0c;移植完毕后&#xff0c;能正常读取电池信息了&#xff0c;但是无意中发现驱动卸载会导致Linux卡死&#xff0c;死前终端闪过大量打印&#xff0c;将putty的缓冲区都耗尽了&#xff0c;必须启用syslog转发并用visual syslog…

用docker 配置scala spark环境

要使用Docker配置Scala和Spark环境&#xff0c;您可以按照以下步骤进行操作。以下是一个基本的示例&#xff0c;您可能需要根据您的具体需求进行调整。 安装Docker: 在您的系统上安装Docker。您可以从Docker官方网站下载并安装适用于您操作系统的版本。 创建Dockerfile: 在您的…

数据分析基础之《pandas(6)—高级处理》

一、缺失值处理 1、如何处理nan 两种思路&#xff1a; &#xff08;1&#xff09;如果样本量很大&#xff0c;可以删除含有缺失值的样本 &#xff08;2&#xff09;如果要珍惜每一个样本&#xff0c;可以替换/插补&#xff08;计算平均值或中位数&#xff09; 2、判断数据是否…

L1-080 乘法口诀数列

一、题目 二、解题思路 三、代码 #include<iostream> using namespace std; int main() {int a1,a2,n;cin>>a1>>a2>>n;if(n1){cout<<a1;return 0; }int a[n*2];cout<<a1<<" "<<a2;a[0]a1;a[1]a2;for(int i2,j2;i&l…

ubuntu20安装mongodb

方法一&#xff1a;直接安装(命令是直接从mongo官网Install MongoDB Community Edition on Ubuntu — MongoDB Manual复制的&#xff09; cat /etc/lsb-release sudo apt-get install -y gnupg curl curl -fsSL https://www.mongodb.org/static/pgp/server-7.0.asc | \sudo gp…

背包问题(01背包、完全背包、多重背包)详解(超详细!!!),及题目代码和题意,包含6个例题。

第一题&#xff1a;01背包问题 01背包问题 时间限制&#xff1a;1秒 内存限制&#xff1a;128M 题目描述 一个旅行者有一个最多能装 M 公斤的背包&#xff0c;现在有 n 件物品&#xff0c;它们的重量分别是 W1&#xff0c;W2&#xff0c;...,Wn ,它们的价值分别为 C1…

maven插件maven-jar-plugin构建jar文件详细使用

文章目录 前言一、使用方式二、常用配置详解1.classesDirectory2.outputDirectory3.excludes4.includes5.archive添加Implementation和Specification属性添加manifestEntries添加键值对属性Manifest Sections自定义manifest配置设置一个可执行的jar文件精确设置Classpath根据目…

[C#]无法获取源 https://api.nuge t.org/v3-index存储签名信息解决方法

参考网上大部分方法错误&#xff0c;根本不起作用。正确方法是 C:\Users\你的用户名\AppData\Roaming\NuGet找到NuGet.Config打开&#xff0c;看到类似下面信息&#xff08;可能不一样&#xff09; <?xml version"1.0" encoding"utf-8"?> <co…

FXTM富拓监管变更!2024开年连续3家交易商注销牌照

交易商的监管信息是经常发生变更的&#xff0c;即使第一次投资时查询平台监管牌照&#xff0c;投资者仍需持续关注其监管动态。千万不要以为第一步审核好后就万事大吉了&#xff01; 2024年开年&#xff0c;就有3家交易商的重要信息发生变更&#xff0c;注销其金融监管牌照&…

专业课147总420+福州大学866信号与系统考研经验福大电子信息技术信息与通信

我本人一战双非上岸福大&#xff0c;初试分数420&#xff0c;期中专业课866信号与系统147&#xff08;有点遗憾没有达到信息通信考研Jenny老师辅导班要求的满分&#xff09;。这里想分享一些自己准备初试的过程和一些学习方法&#xff0c;希望能给各位准备报考福州大学866的学弟…

HiveSQL——借助聚合函数与case when行转列

一、条件函数 if 条件函数 if函数是最常用到的条件函数&#xff0c;其写法是if(xn,a,b), xn代表判断条件&#xff0c;如果xn时&#xff0c;那么结果返回a ,否则返回b。 selectif(age < 25 or age is null, 25岁以下, 25岁以上) as age_cnt,count(1) as number from table…

WifiConfigStore初始化读取-Android13

WifiConfigStore初始化读取 1、StoreData创建并注册2、WifiConfigStore读取2.1 文件读取流程2.2 时序图2.3 日志 1、StoreData创建并注册 packages/modules/Wifi/service/java/com/android/server/wifi/WifiConfigManager.java mWifiConfigStore.registerStoreData(mNetworkL…

读千脑智能笔记07_人工智能的未来(中)

1. 机器智能的未来 1.1. 没有任何技术原因阻止我们创造智能机器 1.1.1. 障碍在于我们缺乏对智能的理解&#xff0c;也不知道产生智能所需的机制 1.2. 历史表明&#xff0c;我们无法预测将推动机器智能向前发展的技术进步 1.2.1. …

Android 11 webview webrtc无法使用问题

问题&#xff1a;Android 11 webview 调用webrtc无法使用, 看logcat日志会报如下错误 [ERROR:address_tracker_linux.cc(245)] Could not send NETLINK request: Permission denied (13) 查了下相关的网络权限都有配置了还是不行&#xff0c;还是报这个权限问题 原因&#xff1…

pytorch训练指标记录之tensoboard,wandb

详解Tensorboard及使用教程_tensorboard怎么用-CSDN博客文章浏览阅读5.1w次&#xff0c;点赞109次&#xff0c;收藏456次。目录一、什么是Tensorboard二、配置Tensorboard环境要求安装三、Tensorboard的使用使用各种add方法记录数据单条曲线(scalar)多条曲线(scalars)直方图(hi…