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博客")

相关推荐
程序员三千_7 分钟前
最近爆火的MCP到底是什么?
前端
古时的风筝19 分钟前
暴论:2025年,程序员必学技能就是MCP
前端·后端·mcp
古时的风筝20 分钟前
这编程圈子变化太快了,谁能告诉我 MCP 是什么
前端·后端·mcp
王月lydia24 分钟前
环境变量篇-vue3的H5项目从0到1工程化落地经验篇2
前端
赵要上天25 分钟前
利用TTP协议 ETag + 路由守卫 实现前端发版后通知用户更新得一个方案
前端
李剑一27 分钟前
写一个vitepress新建文章脚本,自动化创建链接,别再手写了!
前端·node.js·vitepress
火星思想27 分钟前
React如何实现时间切片
前端·react.js
小学生豆豆32 分钟前
eslint以及其扩展插件
前端
Electrolux38 分钟前
【前端bug】Safari的选区机制导致的前端@人组件的bug
前端
icefiresong2439 分钟前
如何让 Vue 组件自动清理 EventBus 监听器?告别内存泄漏!
vue.js