vue3的 nextTick()的使用

引言:

当你修改了响应式状态时,DOM 会被自动更新。但是需要注意的是,DOM 更新不是同步的。Vue 会在"next tick"更新周期中缓冲所有状态的修改,以确保不管你进行了多少次状态修改,每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码,可以使用 nextTick() 全局 API:

复制代码
import { nextTick } from 'vue'

async function increment() {
  count.value++
  await nextTick()
  // 现在 DOM 已经更新了
}

一句话,总结一下就是:当数据更新以后,在dom中完成渲染之后,自动执行该函数。

nextTick() 等待下一次DOM更新刷新的工具方法。nextTick()可以在状态改变后立即使用,以等待DOM更新完成。你可以传递一个回调函数作为参数,或者await返回的Promise。

复制代码
<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

  // DOM 还未更新
  console.log(document.getElementById('counter').textContent) // 0

  await nextTick()
  // DOM 此时已经更新
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

或者

复制代码
<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

  // DOM 还未更新
  console.log(document.getElementById('counter').textContent) // 0

  nextTick(()=>{
     // DOM 此时已经更新
     console.log(document.getElementById('counter').textContent) // 1
  })
  
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

需要注意的是,虽然 nextTick() 方法可以解决异步更新导致的问题,但如果过度使用该方法会导致性能问题。因此,在实际开发中,只有在必要的情况下才应该使用 nextTick() 方法。

参考传送门:[5.7 Vue中this.nextTick()方法的使用及代码示例-CSDN博客](https://blog.csdn.net/qq_40805441/article/details/130860183 "5.7 Vue中this.nextTick()方法的使用及代码示例-CSDN博客")

相关推荐
LaoZhangAI1 分钟前
Claude 4 vs Gemini 2.5 Pro:2025年顶级AI模型权威对比分析
前端·后端
Dream耀2 分钟前
Cookie:Web身份认证的基石
前端·javascript·http
LuckySusu2 分钟前
【CSS篇】元素的层叠顺序(Stacking Order)详解
前端·css
come112344 分钟前
npm 命令入门指南(前端小白版)
前端·npm·node.js
墨菲安全4 分钟前
NPM组件 alan-baileys 等窃取主机敏感信息
前端·npm·node.js·npm组件·恶意包·主机信息窃取
我在北京coding5 分钟前
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree
前端·npm·node.js
拾光拾趣录5 分钟前
CSS高级技巧与实用伪类
前端·css
whale fall6 分钟前
npm代理设置 + npm配置镜像源
前端·npm·node.js
用户40812812003816 分钟前
前端资源缓存策略
前端
PineappleCoder6 分钟前
React 18 开发完全指南:从环境搭建到调试优化
前端·react.js