> Как дождаться перерендера шаблона после изменения реактивных данных во Vue (Vue.js)

Чтобы дождаться перерендера шаблона после изменения реактивных данных во Vue, используйте метод nextTick. Vue обновляет DOM асинхронно после изменения данных, поэтому прямой доступ к обновлённому DOM сразу после мутации может вернуть старое состояние.

Пример с Composition API:

JAVASCRIPT
import { ref, nextTick } from 'vue'

const count = ref(0)

function increment() {
  count.value++
  // DOM ещё не обновлён
  console.log(document.getElementById('counter').textContent) // старое значение

  nextTick(() => {
    // DOM обновлён
    console.log(document.getElementById('counter').textContent) // новое значение
  })
}

Пример с Options API:

JAVASCRIPT
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
      this.$nextTick(() => {
        // DOM обновлён
        console.log(this.$el.querySelector('#counter').textContent)
      })
    }
  }
}

nextTick возвращает Promise, поэтому можно использовать await:

JAVASCRIPT
async function increment() {
  count.value++
  await nextTick()
  // DOM обновлён
}

Этот механизм гарантирует, что колбэк выполнится после того, как Vue завершит все синхронные обновления и применит изменения к DOM.