Что такое nextTick или что он делает в VueJs

Ответ 1

nextTick позволяет вам что-то сделать после того, как вы изменили данные, а VueJS обновил DOM на основе изменения данных, но до того, как браузер отобразил те, которые были изменены на странице.

Как правило, разработчики используют встроенную функцию JavaScript setTimeout для достижения аналогичного поведения. Но, используя setTimeout отказывается от контроля над браузером, прежде чем он вернет вам управление через ваш обратный вызов.

Скажем, вы изменили некоторые данные. Vue обновляет DOM на основе данных. Имейте в виду, что изменения DOM еще не отображаются на экране браузером. Если вы использовали nextTick, ваш callback теперь nextTick. Затем браузер обновляет страницу. Если вы использовали setTimeout, ваш callback будет вызван только сейчас.

Вы можете визуализировать это поведение, создав небольшой компонент, например:

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
        msg: 'One'
    }
  },
  mounted() {
      this.msg = 'Two';

      this.$nextTick(() => {
          this.msg = 'Three';
      });
  }
}
</script>

Запустите локальный сервер. Появится сообщение " Three.

Теперь замените this.$nextTick with setTimeout

setTimeout(() => {
    this.msg = 'Three';
}, 0);

Перезагрузите браузер. Вы увидите Two, прежде чем увидите Three.

Проверьте этот скрипт, чтобы увидеть его вживую

Это потому, что Vue обновил DOM до Two, дал контроль над браузером. Отображен браузер. Two. Затем, называется ваш обратный вызов. Vue обновил DOM до Three. Какой браузер снова отображается.

С nextTick. Vue udpated DOM до Two. Вызывается ваш обратный вызов. Vue обновил DOM до Three. Затем дал контроль над браузером. И в браузере отобразится " Three.

Надеюсь, это было ясно.

Чтобы понять, как Vue реализует это, вам нужно понять концепцию цикла событий и микротоков.

После того как вы поняли эти понятия (er), проверьте исходный код nextTick.

Ответ 2

Next Tick в основном позволяет вам запускать некоторый код после того, как vue повторно визуализировал компонент, когда вы внесли некоторые изменения в реактивное свойство (данные).

// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
  // this function is called when vue has re-rendered the component.
})

// usage as a promise (2.1.0+, see note below)
Vue.nextTick()
  .then(function () {
      // this function is called when vue has re-rendered the component.
})

Из документации Vue.js:

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

Подробнее об этом читайте здесь.

Ответ 3

Чтобы Праншат ответил на вопрос о разнице между использованием nextTick и setTimeout, более четко, я раздвоил его скрипку: здесь

mounted() {    
  this.one = "One";

  setTimeout(() => {
    this.two = "Two"
  }, 0);

  //this.$nextTick(()=>{
  //this.two = "Two"
  //})}

Вы можете увидеть в скрипте, что при использовании setTimeOut начальные данные очень быстро мигают, когда компонент монтируется перед адаптацией изменения. Принимая во внимание, что при использовании nextTick данные перехватываются, изменяются перед рендерингом в браузер. Таким образом, браузер показывает обновленные данные, даже не зная старых. Надеюсь, что очищает две концепции одним махом.

Ответ 4

В документации сказано:

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

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

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

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

2. Его легче понять, когда вы увидели реальные варианты использования. После того, как вы поймете, страх уйдет, и у вас под рукой будет удобный инструмент.

Пойдем на это, тогда.

Понимание $ nextTick

Мы программисты, не так ли? Хорошо, используйте наш любимый подход "разделяй и властвуй", чтобы попытаться переводить описание .nextTick() по крупицам. Это начинается с:

Отложить обратный звонок

Хорошо, теперь мы знаем, что он принимает обратный вызов. Так это выглядит так:

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

Отлично. Этот обратный вызов откладывается (так говорят тысячелетия с задержкой) до…

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

Хорошо. Мы знаем, что Vue выполняет обновления DOM асинхронно. Он предлагает способ сохранения этих обновлений до тех пор, пока они не потребуются. Создает очередь обновлений и сбрасывает ее при необходимости. Затем DOM "исправляется" и обновляется до последней версии.

Какие?

Позвольте мне повторить попытку: представьте, что ваш компонент делает что-то действительно важное и умное, например this.potatoAmount = 3. Vue не будет автоматически перерисовывать компонент (и, следовательно, DOM) автоматически. Это очередь в очередь необходимых изменений. Затем в следующем "тике" (как в часах) очередь очищается, и обновление применяется. Тада!

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

Как я уже говорил ранее... не так часто. Подход "потока данных", который выталкивает Vue, React и другой от Google, о котором я не буду упоминать, в большинстве случаев делает его ненужным. Тем не менее, иногда нам нужно ждать, пока некоторые элементы появятся/исчезнут/будут изменены в DOM. Это когда nextTick пригодится.

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

Именно так! Это последнее определение, которое Vue Docs предоставил нам. Внутри нашего обратного вызова DOM был обновлен, поэтому мы можем взаимодействовать с "самой обновленной" версией.

Докажите это

Ладно ладно. Посмотрите консоль, и вы увидите, что значение наших данных обновляется только внутри обратного вызова 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>