vue3的 nextTick()的使用

甜菜，是我鸭！2023-11-24 8:41

引言：

当你修改了响应式状态时，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博客")