阅读数:192 评论数:0

一、概述

nextTick是将回调推迟到下一个dom更新周期之后执行。nextTick 可以用来确保你的代码在 Vue 完成其响应式数据到 DOM 的渲染之后运行，这有助于避免潜在的竞态条件和不一致的行为。

在 Vue 2 中，this.$nextTick() 通常是作为组件实例方法使用的，但在 Vue 3 中，它被作为一个全局的 API 方法提供。这意味着你不需要通过组件实例来调用它，而是直接从 vue 包中导入。

二、使用

1、引入

import { nextTick } from 'vue'

2、配合异步使用

setup() {
    const message = ref('Hello!')
    const changeMessage = async newMessage => {
      message.value = newMessage
      await nextTick()
      console.log('Now DOM is updated')
    }
  }