$nextTick VS setTimeout, sehen Sie sich ihre Unterschiede an

In diesem Artikel werden $nextTick und setTimeout kurz verglichen, um die Unterschiede zwischen ihnen zu sehen.

Ein Frontend-Entwickler (Xiao Zhi) betrat eine Vue-Bar. Ash bestellte seinen Lieblingscocktail: Nuxt. Der Barkeeper arbeitet hart daran, es zuzubereiten. Dann fing er an, vor sich hin zu plappern.

Xiao Zhi erzählte, wie er $nextTick unter der Instanzmethode von Vue 3 entdeckte und überrascht war. Xiaozhi verwendet Vue schon seit einiger Zeit und hat sich daran gewöhnt, $watch und $emit als Instanzmethoden zu schreiben. Wofür wird also $nextTick verwendet? In der Vue-Dokumentation heißt es, dass es „einen Rückruf [aufschiebt], der nach dem nächsten DOM-Aktualisierungszyklus ausgeführt wird“. $nextTick的，并大吃一惊。小智使用Vue已经有一段时间了，他已经习惯了把$watch和$emit写成实例方法。那么，$nextTick是用来做什么的？Vue文档说，它"[defers]回调，在下一个DOM更新周期后执行"。

但是小智并不相信。

他继续讲述他是如何尝试这样做的：

this.loadingAnimation = true
this.startVeryLongCalculation()
this.completeVeryLongCalculation()
this.loadingAnimation = false

有用。 为什么？

nextTick做什么？

nextTick接受一个延迟到下一个DOM更新周期的回调函数。这只是Vue的一种说法，"嘿，如果你想在DOM更新后执行一个函数（这种情况很少发生），我希望你使用nextTick而不是setTimeout"。

Vue.nextTick(() => {}) // syntax

下面很快就会讲到setTimeout和nextTick参数。我们用这个例子来可视化nextTick的行为:

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  name: &#39;getCurrentTime&#39;,
  data() {
    return {
      currentTime: &#39;&#39;
    }
  },
  mounted() {
    this.currentTime = 3;

    this.$nextTick(() => {
        let date = new Date()
        this.currentTime = date.getFullYear()
    });
  }
}
</script>

在J电脑上运行这个代码片段。它将显示2021年。并不是说如果你去掉nextTick，就不会得到同样的结果。然而，你应该明白，Vue会根据数据中的内容对DOM进行修改。

在上面的代码片段中，Vue将DOM更新为3，然后调用回调，将DOM更新为2021，最后将控制权交给浏览器，浏览器将显示2021。

到目前为止，我们已经研究了nextTick在回调队列中插入回调函数并在适当的时候执行该函数。

这个你可能会感兴趣，nextTick中的回调是作为事件循环中的一个微任务使用的。nextTick的源代码明确指出，"nextTick行为利用了微任务队列，可以通过本地的Promise.then或MutationObserver来访问。"

setTimeout vs nextTick

在DOM更新后执行函数的另一种方法是使用JavaScript的setTimeout()函数。

我们将上面的代码用setTimeout替换nextTick:

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  name: &#39;getCurrentTime&#39;,
  data() {
    return {
      currentTime: &#39;&#39;
    }
  },
  mounted() {
    this.currentTime = 3;

    setTimeout(() => {
      let date = new Date()
      this.currentTime = date.getFullYear()
    }, 0);
  }
}
</script>

运行此代码片段。 首先看到3然后2021。它发生得很快，因此如果没有看到此行为，需要刷新浏览器。

在上面的代码片段中，Vue将DOM更新为3，并提供浏览器控制。然后浏览器显示3，调用回调函数，将DOM更新到2021，最后将控制权交给浏览器，现在浏览器显示2021。

nextTick的实现在不支持Promise和MutationObserver的浏览器（IE 6-10和Opera Mini浏览器）上，使用setTimeout作为后备方法，对于不支持Promise和MutationObserver的浏览器（IE 10），它更倾向于setImmediate。

何时使用 nexttick

• 当你想使用setTimeout时
• 当你想确定DOM能反映你的数据时
• 在尝试执行异步操作时，遇到Uncaught (in promise) DOMException等错误。记住，Vue是异步更新DOM的

最后来个示例:

<div id="app">
  <div ref="listScroll" class="scrolledList">
    <ul ref="scrolledHeight">
      <li v-for="month in months">
        {{month}}
      </li>               
    </ul>
  </div>

  <input type="text" placeholder="Add Month" v-model="month">
  <button @click="addMessage" @keyup.enter="addMessage"> Add Month</button>
</div>

<script src="https://unpkg.com/vue@next"> 
  Vue.createApp({
    data() {
      return {
        month: &#39;&#39;,
        months: [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;June&#39;, &#39;July&#39;, &#39;Aug&#39;]
      }
    },
    mounted() {
      this.updateScrollNextTick()
    },
    methods: {
      addMessage() {
        if(this.month == &#39;&#39;){
          return
        }

        this.months.push(this.month)
        this.month = &#39;&#39;
        this.updateScrollNextTick()
      },
      updateScrollNextTick () {
        let scrolledHeight = this.$refs.scrolledHeight.clientHeight

        this.$nextTick(() => {
          this.$refs.listScroll.scrollTo({
            behavior: &#39;smooth&#39;,
            top: scrolledHeight
          })
        })
      }
    },
  })
  .mount("#app")
</script>

示例地址：https://codepen.io/ammezie/pen/OJpOvQE

主要部分：

运行结果：

在上面的代码片断中，我们想在一个新项目被添加到列表中时获得平滑的向下滚动效果。浏览一下代码，尝试修改一下，去掉nextTick，你就会失去那种平滑的滚动效果。你也可以尝试用setTimeout来代替nextTick

Aber Xiaozhi glaubte es nicht.

Er erzählt weiter, wie er das versucht hat:

rrreee

Es funktioniert. Warum?

Was macht nextTick?

nextTick akzeptiert eine Rückruffunktion, die bis zum nächsten DOM-Aktualisierungszyklus verzögert wird. Dies ist nur Vues Art zu sagen: „Hey, wenn Sie eine Funktion ausführen möchten, nachdem das DOM aktualisiert wurde (was selten vorkommt), möchte ich, dass Sie nextTick anstelle von setTimeout verwenden. Code>". <p>rrreee</p>Die Parameter <code>setTimeout und nextTick werden bald besprochen. Wir verwenden dieses Beispiel, um das Verhalten von nextTick zu visualisieren:

rrreee

Führen Sie dieses Codefragment auf einem J-Computer aus. Es wird das Jahr 2021 angezeigt. Es ist nicht so, dass Sie nicht das gleiche Ergebnis erhalten, wenn Sie nextTick entfernen. Sie sollten jedoch verstehen, dass Vue das DOM basierend auf dem Inhalt der Daten ändert.

Im obigen Codeausschnitt aktualisiert Vue das DOM auf 3, ruft dann den Rückruf auf, um das DOM auf 2021 zu aktualisieren, und übergibt schließlich die Kontrolle an den Browser, durchsuchen Sie die Der Browser zeigt 2021 an. 🎜🎜Bisher haben wir uns angeschaut, wie nextTick eine Rückruffunktion in die Rückrufwarteschlange einfügt und die Funktion zum richtigen Zeitpunkt ausführt. 🎜🎜Das könnte Sie interessieren. Der Callback in nextTick wird als Mikrotask in der Ereignisschleife verwendet. nextTicks Quellcode besagt eindeutig, dass das „nextTick-Verhalten die Mikrotask-Warteschlange nutzt und über die lokale Schnittstelle darauf zugegriffen werden kann Promise.then oder MutationObserver für den Zugriff auf „🎜

setTimeout vs nextTick🎜🎜Eine weitere Möglichkeit, eine Funktion nach dem DOM-Update auszuführen. Verwenden Sie die JavaScript-Funktion setTimeout(). 🎜🎜Wir ersetzen den obigen Code durch setTimeout und ersetzen nextTick: 🎜rrreee🎜Führen Sie dieses Code-Snippet aus. Siehe zuerst 3 und dann 2021. Dies geschieht schnell. Wenn Sie dieses Verhalten nicht bemerken, müssen Sie Ihren Browser aktualisieren. 🎜🎜Im obigen Codeausschnitt aktualisiert Vue das DOM auf 3 und stellt die Browsersteuerung bereit. Dann zeigt der Browser 3 an, ruft die Rückruffunktion auf, aktualisiert das DOM auf 2021 und übergibt schließlich die Kontrolle an den Browser. Jetzt zeigt der Browser 2021an > >. 🎜🎜nextTick ist in Browsern implementiert, die Promise und MutationObserver nicht unterstützen (IE 6-10 und Opera Mini-Browser), verwenden Sie s etTimeout wird als Fallback-Methode verwendet und bevorzugt setImmediate für Browser, die den Code Promise und MutationObserver (IE 10) nicht unterstützen >. 🎜

Wann Sie nexttick verwenden sollten🎜

• Wenn Sie setTimeout
• Wann Sie sichergehen möchten Das DOM kann beim Reflektieren Ihrer Daten
• Beim Versuch, einen asynchronen Vorgang auszuführen, stoßen Sie auf Fehler wie Uncaught (in Promise) DOMException. Denken Sie daran, dass Vue das DOM asynchron aktualisiert

🎜Hier ist zum Schluss ein Beispiel:🎜rrreee🎜🎜Beispieladresse: https://codepen.io/ammezie/pen/OJpOvQE🎜

🎜Main Teil: 🎜🎜🎜 🎜Laufergebnisse: 🎜🎜🎜🎜Im obigen Codeausschnitt möchten wir einen reibungslosen Scroll-Down-Effekt erzielen, wenn ein neues Element zur Liste hinzugefügt wird. Schauen Sie sich den Code an und versuchen Sie, ihn so zu ändern, dass nextTick entfernt wird. Der reibungslose Scrolleffekt geht dann verloren. Sie können auch versuchen, setTimeout anstelle von nextTick zu verwenden. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir untersucht, wie nextTick funktioniert. Wir schauen uns die Unterschiede zum normalen JavaScript setTimeout genauer an und gehen auf praktische Anwendungsfälle ein. 🎜🎜🎜Englische Originaladresse: https://blog.logrocket.com/understanding-nexttick-in-vue-js/🎜🎜Autor: Chimezie Enyinnaya🎜🎜Übersetzer: Front-end Xiaozhi🎜🎜Nachdruckadresse: https:// segmentfault.com/a/1190000040246186🎜

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt von$nextTick VS setTimeout, sehen Sie sich ihre Unterschiede an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!