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

аю документы, но не могу этого понять. Я знаю, что данные, вычисленные, смотреть, методы, но что такоеnextTick() использовать для в Vuejs?

 Bert04 дек. 2017 г., 15:34
Ключевая концепция, чтобы понять, что DOM обновляетсяасинхронно, Когда вы меняете значение в Vue, это ненемедленно оказываемых в DOM. Вместо этого Vue ставит в очередь обновление DOM, а затем по таймеру обновляет DOM. Как правило, это происходит так быстро, что это не имеет значения, но иногда вам нужно обновлять обработанный DOM после того, как Vue его обработал, что вы не можете сразу сделать в методе, потому что обновление не произошло все же. В этих случаях вы бы использовалиnextTick. Документировано здесь.

Ответы на вопрос(3)

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

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

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

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

<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 с участиемsetTimeout

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

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

Проверьте эту скрипку, чтобыувидеть это в прямом эфире

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

С участиемnextTick, Vue обновил DOMTwo, Называется ваш обратный звонок. Vue обновил DOM доThree, Затем дал контроль браузеру. И браузер отображаетсяThree.

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

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

Как только вы поняли эти понятия, проверьтеисходный код для nextTick.

 hidar15 дек. 2017 г., 22:08
Одна вещь, которую я не понимаю, это когда вы говорите «vue updates the data», вы ссылаетесь на обновление, сделанное с помощью ex:this.name = 'foo' или вы ссылаетесь на внедрение html-элементов на страницу?

как 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.

Узнайте больше об этом,Вот.

 Daksh Miglani13 июн. 2018 г., 18:43
Это был пример, чтобы сделать это проще.
 Daksh Miglani04 дек. 2017 г., 14:46
хорошо, я отредактирую ответ и попытаюсь объяснить это дальше.
 Daksh Miglani04 дек. 2017 г., 14:55
@hidar вы можете использовать его в ситуациях, когда вам нужно сделать несколько обновлений, но вы хотите явно визуализировать друг друга в разных циклах dom
 hidar04 дек. 2017 г., 14:43
обновить это как? это то, что я не предпринимаю. если я обновлю vm.msg, то dom уже обновлен, потому что есть новый текст '' привет '.. так как я могу обновить его снова? вы можете опубликовать скрипку с примером pls? спасибо
 zenw0lf13 июн. 2018 г., 18:43
Это не для того, чтобы позволить вамОбновить сам DOM, но делать с ним что угодно (будь то обновление, читать информацию из него и т. д.) после того, как на него повлияли / изменились изменения, сделанные Vue (потому что вы изменили значение реактивного свойства и т. д.).

setTimeout более явным, я раздвоил его скрипку:Вот

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

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

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

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

Ваш ответ на вопрос