前言

对于新人朋友而言，nextTick可能是一个较为陌生的API，接下来我们从Vue2和Vue3的nextTick的用法进行示例讲解。

一、关于nextTick

nextTick本身是一种API，使用方法也很简单，主要就是回调，了解它的原理之前我们能需要对JavaScript的异步运行机制有一定的了解。
首先我们需要认识到，Vue实现响应式的异步更新，也不是数据（data）发生变化后立即产生的变化。处于对性能的考量，每一次数据发生变化，DOM不会立即更新，而是说在Vue中只要观察到data的变化，即会立即将事件缓存到一个事件循环中去，避免不必要的DOM操作，但是若是想要在数据发生变化之后立即获取数据或者操作一些什么，这个时候我们就需要调用到nextTick。

二、使用

接下来我们通过两个案例来看一下nextTick的具体使用方法，然后我们再来做一个总结。

1.示例一：获取数据更新后的DOM节点的值

下面的案例很简单，只是一个简单的更换msg的操作，点击按钮将msg从Hello换为Hi；然后打印出ref_p的值。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <p ref="ref_p">{{msg}}</p>
        <input @click="msgFn" type="button" value="按钮" />
    </div>
    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    msg: 'Hello!'
                }
            },
            methods: {
                msgFn() {
                    this.msg = 'Hi';
                    console.log(this.$refs['ref_p'].innerHTML);
                }
            },
        }).mount('#app')
    </script>

点击按钮之前
在这里插入图片描述

点击按钮之后
在这里插入图片描述
然后我们查看打印出来的ref_p的值：

我们发现一个问题，右边打印出来的值任然是变化之前的Hello，就是说页面视图变化了，但是打印的数据没有变化。那么我们来看看使用nextTick之后的结果：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <p ref="ref_p">{{msg}}</p>
        <input @click="msgFn" type="button" value="按钮" />
    </div>
    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    msg: 'Hello!'
                }
            },
            methods: {
                msgFn() {
                    this.msg = 'Hi';
                    // console.log(this.$refs['ref_p'].innerHTML);
                    this.$nextTick(() => {
                        console.log(this.$refs['ref_p'].innerHTML);
                    })
                }
            },
        }).mount('#app')
    </script>

然后点击按钮之后：
在这里插入图片描述
可以发现此时的ref_p的节点值就变成了Hi，此时就达到了预期的效果。下面看一下示例2：在setup中调用nextTick；

2.示例二：在setup中调用nextTick

下面的案例也很简单，也是点击按钮改变msg的值，获取DOM更新后的值：

  <div class="nt">
    <p ref="p_msg">{{ msg }}</p>
    <button @click="test">点击</button>
  </div>
</template>


<script lang="ts" setup>
	import { ref, nextTick } from "vue";
	const msg = ref("测试1")
	const p_msg = ref(null);
	const test = async () => {
	  msg.value = "结果1";
	  console.log("msg的value:", msg.value)
	  console.log("更新前的p_msg的innerHtml:", p_msg.value.innerHTML);
	  await nextTick();
	  console.log("更新后的p_msg的innerHtml:", p_msg.value.innerHTML);
	};
</script>

注意一下此处的nextTick的使用，先导入nextTick，因为是一个异步更新的任务，所以我们也可以使用async/await,
在这里插入图片描述