Vue nextTick(callback) 简介

nextTick()

响应式数据变化之后，并不是立刻同步更新DOM视图。nextTick()函数可以取响应式数据变化之后的视图。

nextTick(callback)
@说明：响应式数据变化后，等待其更新视图。这样就能获取最新的DOM内容
@参数：
    callback [可选] 回调函数
@返回：无

 

注意：由于它是异步函数，所以我们在使用时，加上await。

 代码示例：

<template>
    <div id="a">
        {{count}}
    </div>
</template>

<script setup>
    import {
        ref,
        nextTick
    } from 'vue'

    // 引入JQ,本人比较习惯使用JQ
    import $ from 'jquery'

    const count = ref(123)

    // 设置定时修改数据
    setTimeout(async () => {
        count.value = 555
        
        // 此时视图未更新
        console.log('count值变化了，但是视图没有变化，内容仍是：' + $('#a').html())
        
        // 等待视图更新：callback方式调用
        await nextTick(() => {
            console.log('已成功获取视图变化后的值：' + $('#a').html());
        })

        // 再次修改数据
        count.value = 7777
        await nextTick()
        console.log('已成功获取视图变化后的值：' + $('#a').html());
    }, 5000)
</script>