nextTick(): 等待下一次 DOM 更新刷新的工具方法
重点解释:
当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。
上案列说明
<template><button id="counter" @click="increment">{{ count }}</button>
</template><script setup>
import { ref, nextTick } from 'vue'const count = ref(0)
const counter = ref()
async function increment() {count.value++// DOM 还未更新console.log("响应式值:", count.value) console.log("DOM值:",document.getElementById('counter').textContent) await nextTick(()=>{// DOM 此时已经更新console.log("更新后的DOM值:",document.getElementById('counter').textContent) })}
</script>
更新过程
当第一次点击时：
count.value++ → 值变为 1（但 DOM 尚未更新）
console.log 获取的是 DOM 当前的文本 → 0，印证了当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的
第二次点击：
count.value++ → 值变为 2（DOM 未更新）
但此时 DOM 已经显示为 1（第一次点击后的DOM更新已完成）
如果想让响应式值和获取的dom值 相同的话就把获取dom内容放在
nextTick():中，它就是等到下一次dom更新完成后执行的。
