介绍

nextTick: 等待下一次 DOM 更新刷新的工具方法。

看完不懂可查看链接（含详细指南）：vue3js.cn/global/next…

当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。 nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

使用

V2
第一种（将函数作为参数）

this.nextTick(()=>{
    ........
})

第二种（不将函数作为参数）

<script>
import { nextTick } from 'vue'
export default {
 data() {
   return {
     count: 0
   }
 },
 methods: {
  async increment() {
     this.count++
    // 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>

v3
第一种（将函数作为参数）

nextTick(()=>{
    ..........
})

第二种（不将函数作为参数）

<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>

Vue2/Vue3 之nextTick函数的使用

介绍

使用