对nextTick的理解

是什么

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

使用场景

如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

参数：一个回调函数，vue在更新dom时调用

<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(()=>{
    console.log(document.getElementById('counter').textContent) // 已经是最新的dom
    console.log('回调函数执行');
  })
  // DOM 此时已经更新
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

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

实现原理