Der von vue erhaltene Wert ist nicht der neueste

Vue ist ein Front-End-Framework, das auf dem MVVM-Muster basiert und zum Erstellen interaktiver Einzelseitenanwendungen verwendet wird. Während der Entwicklung von Vue stoßen wir manchmal auf ein Problem: Der erhaltene Wert ist nicht der neueste Wert.

Zum Beispiel haben wir eine Variable in der Vue-Komponente und möchten eine bestimmte Operation ausführen, wenn sich ihr Wert ändert:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">更改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'hello Vue'
      console.log(this.message)
      this.doSomething() // doSomething方法需要使用最新的message值
    },
    doSomething() {
      console.log(this.message) // 这里输出的是旧的message值
    }
  }
}
</script>

Wenn im obigen Code auf die Schaltfläche „Ändern“ geklickt wird, ändern wir den Nachrichtenwert und Die neueste Nachricht wird gedruckt. Wenn wir jedoch die Methode doSomething aufrufen, stellen wir fest, dass der Wert der Ausgabenachricht nicht der neueste Wert „Hallo Vue“, sondern der alte Wert „Hallo Welt“ ist.

Warum ist das so?

Tatsächlich erfolgt die Aktualisierung von Daten in Vue asynchron. Wenn wir den Wert einer Variablen ändern, reagiert Vue nicht sofort auf die Aktualisierung, sondern fügt die Aktualisierung einer Warteschlange hinzu und aktualisiert das DOM in der nächsten Ereignisschleife. Wenn wir also die Methode „doSomething“ aufrufen, wartet Vue immer noch auf die nächste Ereignisschleife, bevor es auf das Update reagiert.

Also, wie erhalte ich den neuesten Wert?

Vue stellt die Methode $nextTick bereit, um die Rückruffunktion auszuführen, nachdem das DOM aktualisiert wurde. Wir können die doSomething-Methode asynchron schreiben und den neuesten Nachrichtenwert über die $nextTick-Methode abrufen:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">更改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'hello Vue'
      console.log(this.message)
      this.$nextTick(() => {
        this.doSomething() // 等到DOM更新后再执行doSomething方法
      })
    },
    doSomething() {
      console.log(this.message) // 这里输出的是最新的message值"hello Vue"
    }
  }
}
</script>

Im obigen Code umschließen wir die doSomething-Methode mit $nextTick. Wenn das DOM aktualisiert wird, ruft $nextTick die Rückruffunktion auf. Führen Sie unsere Methode aus, damit wir den neuesten Nachrichtenwert erhalten.

Zusammenfassung:

Das Aktualisieren von Daten in Vue erfolgt asynchron. Wenn wir den neuesten Wert erhalten möchten, müssen wir die Methode $nextTick verwenden, um auf die Aktualisierung des DOM zu warten, bevor wir die entsprechende Methode ausführen. In der tatsächlichen Entwicklung müssen wir $nextTick zum richtigen Zeitpunkt verwenden, um zu vermeiden, dass der alte Wert erhalten wird.

Das obige ist der detaillierte Inhalt vonDer von vue erhaltene Wert ist nicht der neueste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!