第十八节：Vue3难点用法剖析(nextTick、xxx 等等)
一. nextTick用法剖析
(之前的文章参考：https://www.cnblogs.com/yaopengfei/p/15464339.html)
1. 含义
function nextTick(callback?: () => void): Promise<void>
等待下一次 DOM 更新刷新的工具方法。
2. 详细说明
当你在 Vue 中更改响应式状态时，最终的 DOM 更新并不是同步生效的，而是由 Vue 将它们缓存到“next tick”以确保每个组件无论发生多少状态改变，都仅执行一次更新。
nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。(换言之：执行完nextTick后，Dom元素更新完毕)
3. 用法
(1).你可以传递一个回调函数作为参数，
(2). await 返回的 Promise。 即：await nextTick();
总之：凡是涉及到对Dom元素的调用，就要思考一下是否需要采用nextTick
4. 案例剖析
以【自增案例】来说明，
(1).思路1剖析：执行到debugger代码，这个时候看一下页面中的dom，发现还是0，继续走完 await nextTick，返现页面中的dom变成1了
(2).思路2: 如果方法里只有 count.value++ 代码，没有后续的代码，继续在count.value++加一个debugger代码，调试发现，走完count.value++, 页面中的dom元素还是没有更新的， 继续走完方法，通过源码调试还需要走一堆代码，然后dom才更新了。
代码分享：
<template>
<button id="counter" @click="increment">{{ count }}</button>
</template>
<script setup>
import { ref, nextTick } from "vue";
const count = ref(0);
const increment = async () => {
// 原始值 0
console.log("原始值：" + document.getElementById("counter").textContent);
// 执行递增操作
count.value++;
// debugger;
// 递增后的值，发现没有变，还是0
console.log("递增后的值：" + document.getElementById("counter").textContent);
await nextTick();
// nextTick后的值，发现变了，是1
console.log("递增后的值：" + document.getElementById("counter").textContent);
// 写法2--在回调中调用
// nextTick(() => {
// console.log(
// "递增后的值：" + document.getElementById("counter").textContent
// );
// });
};
</script>5. 项目中的案例剖析
(1). 打开弹窗后的聚焦，比如：用户新增页面
需要写在nextTick中, 因为弹框中 el-input元素，需要通过v-model绑定值, value值需要响应式更新，那么自身dom的更新就会被缓存在 “next tick”中
(2). 初始化initTableColumn表格显示列的时候需要调用
清空数据后，肯定要nextTick让页面生效后，再次调用赋值才会生效
6. await+promise原理剖析
(详见：https://www.cnblogs.com/yaopengfei/p/16118744.html)
await后面跟一个Promise表达式, await会等到Promise的状态变成fulfilled状态(resolved)，之后继续执行后面的代码；
二. xxx
三. xxx
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
