前言：最近在做一个模块时遇到一个问题：改变渲染li列表的数据data后立即查询li节点，发现个数与数据不符。
首先，由于我是通过几个接口调用后才得到data（使用了三个await），一开始我以为是await的问题，特意查了一下await的相关使用（await后面的代码都会放到微任务队列中，是不会先执行的），并且data打印出来也是我想要的结果，但是在data打印后再打印li的个数就不对了，让我觉得很奇怪，后面换了一种方法实现。最近看到了nextTick的相关使用才知道原因。
当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存在一个队列中，直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变，都仅执行一次更新。
nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。
示例
...
// 以上为一些修改渲染li列表的数据的操作
console.log(document.getElementsByTagName('li'));
Vue.nextTick(()=>{
console.log("nextTick中的");
console.log(document.getElementsByTagName('li'));
})
结果如下：
所以如果想改变了数据之后就想查询数据，可以使用
nextTick()进行操作
详细信息可查看官网：全局 API：常规 | Vue.js (vuejs.org)
