В документации Vue говорится:

Vue.nextTick ([обратный вызов, контекст])

Задерживают обратный вызов, который будет выполняться после следующего цикла обновления DOM. Используйте его сразу после того, как you’ve изменил некоторые данные для ожидания обновления DOM.

Хм..., если это чувствует себя пугающим сначала, не волнуйтесь, что я попытаюсь объяснить это максимально простой. Но сначала существует 2 вещи, которые необходимо знать:

1. Его использование является редким. Как одна из тех серебряных волшебных карт. Я записал несколько Vue приложения и столкнулся с nextTick () несколько раз.

2. It’s легче понять однажды you’ve замеченный некоторые реальные варианты использования. После того, как Вы получите идею, страх уйдет, и у Вас будет удобный инструмент под Вашим поясом.

Let’s идут для него, затем.

$nextTick Понимания

Мы - программисты, aren’t мы? We’ll используют наше любимое деление и завоевывают подход, чтобы попытаться перевести описание .nextTick() поразрядно. Это запускается с:

Задерживают обратный вызов

хорошо, теперь мы знаем, что он принимает обратный вызов. Таким образом, это похоже на это:

Vue.nextTick(function () {
  // do something cool
});

Большой. Этот обратный вызов задерживается (это - то, как миллениалы говорят отложенный), until†¦

следующий цикл обновления DOM.

Хорошо. Мы знаем, что Vue выполняет обновления DOM асинхронно . Это показывает способ сохранить эти обновления “stored”, пока это не должно применять их. Это создает очередь обновлений и сбрасывает его при необходимости. Затем DOM является “patched” и обновленный к его последней версии.

, Что?

Позволяют мне попробовать еще раз: Предположите, что Ваш компонент делает что-то действительно существенное и умное как this.potatoAmount = 3., Vue won’t повторно представляют компонент (и таким образом DOM) автоматически. It’ll стоят в очереди необходимая модификация. Затем в следующем “tick” (как в часах), сбрасывается очередь, и обновление применяется. Tada!

Хорошо! Таким образом, мы знаем, что можем использовать nextTick() для передачи функции обратного вызова, которая выполняется прямо после , данные установлены, и DOM обновил.

, Поскольку я говорил что earlier†¦ не настолько часто. “data flow” подход, который управляет Vue, Реагируйте, и другой от Google, который я не упомяну, делает это ненужным большую часть времени. Все же иногда мы должны ожидать некоторых элементов для казавшегося/исчезновения / измененными в DOM. Это - когда nextTick пригождается.

Использование это сразу после you’ve изменило некоторые данные для ожидания обновления DOM.

Точно! Это - последняя часть определения что документы Vue, предоставленные нам. В нашем обратном вызове DOM был обновлен так, мы можем взаимодействовать с “most updated” версия его.

Доказывают его

Хорошо, хорошо. Посмотрите консоль, и you’ll видят, что значение наших данных обновляется только в обратном вызове nextTick:

const example = Vue.component('example', {
  template: '<p>{{ message }}</p>',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  mounted () {
    this.message = 'updated'

        console.log(
        'outside nextTick callback:', this.$el.textContent
    ) // => 'not updated'

    this.$nextTick(() => {
      console.log(
        'inside nextTick callback:', this.$el.textContent
      ) // => 'not updated'
    })
  }
})


new Vue({
  el: '#app',
    render: h => h(example)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app"></div>

вариант использования А

Let’s пытаются определить некоторый полезный вариант использования для nextTick.

Предполагают, что необходимо выполнить некоторое действие, когда компонент смонтирован. НО! не только компонент. Также необходимо ожидать, пока все его дочерние элементы не смонтированы и доступны в DOM.Черт! Наш смонтированный рычаг doesn’t гарантирует, что целое дерево компонента представляет.

, Если только у нас был инструмент для ожидания следующего DOM, обновляют cycle†¦

Hahaa:

mounted() {
  this.$nextTick(() => {
    // The whole view is rendered, so I can safely access or query
    // the DOM. ¯\_(ツ)_/¯
  })
}

Вкратце

Так: nextTick удобный способ выполнить функцию после того, как данные были установлены, и DOM был обновлен.

необходимо ли ожидать DOM, возможно, потому что необходимо выполнить некоторое преобразование, или необходимо ли ожидать внешней библиотеки для загрузки ее материала? Затем используйте nextTick.

Некоторые люди также используют nextTick в своих модульных тестах как способ гарантировать, что данные были обновлены. Таким образом, они могут протестировать “updated version” компонента.

Vue.nextTick () или vm. $nextTick ()?

беспокойство Don’t. Оба - (почти) то же. Vue.nextTick() обращается к глобальному методу API, в то время как vm.$nextTick() метод экземпляра. Единственная разница - то, что vm.$nextTick doesn’t принимают контекст как второй параметр. Это всегда связывается с [1 114] (также известный как сам экземпляр).

А длятся часть прохлады

Уведомление, что nextTick возвраты Promise, таким образом, мы можем пойти полно-спокойные с [1 117] и улучшить пример:

async mounted () {
    this.message = 'updated'
    console.log(this.$el.textContent) // 'not updated'
    await this.$nextTick()
    console.log(this.$el.textContent) // 'updated'
}

содержание было взято от [1 118] [1 174] AdriГ Fontcuberta