$nextTick-Erklärung, die Sie auf einen Blick verstehen

1. Funktionsbeschreibung

Heute werden wir diese kleine Funktion implementieren. Nachdem die Seite gerendert wurde, wird ein Div-Element angezeigt. Wenn auf dieses Div-Element geklickt wird, verschwindet das Div-Element. Ein Eingabeelement wird angezeigt und das Eingabeelement wird fokussiert. Ich glaube, jeder denkt, es sei einfach. Schauen wir es uns an.

Erstellen Sie eine Komponente namens NextTick.vue;

Einführung der Registrierung auf der Seite

2. Übergeordnete Komponente

<Vorlage>
  <div>
    <nächster Tick></nächster Tick>
  </div>
</Vorlage>

<script lang="ts">
importiere NextTick aus "../components/NextTick.vue"
Standard exportieren {
  Name:"Über",
  Komponenten: {
    NächsterTick
  },
}
</Skript>

3. Unterkomponente NextTick.vue

<Vorlage>
    <div>
        <div>Ich bin eine Komponente</div>
        <div v-if="flag" class="sun" @click="handerClick">Eingabe anzeigen</div>
        <input v-else ref="inputRef" class="yuelaing"/>
    </div>
</Vorlage>
<Skript>
Standard exportieren {
    Daten(){
        zurückkehren {
            Flagge: wahr,
        }
    },
    Methoden: {
        händerKlick(){
            diese.flagge=false;
            dies.$refs.inputRef.focus();
        },
    },
}
</Skript>

4Warum ist es undefiniert?

dies.flag=false;
dies.$refs.inputRef.focus();

Beim Ausführen von Seitenoperationen this.$refs.inputRef.focus();

Es braucht Zeit (es wurde noch nicht aktualisiert; es ist noch eine alte Seite)

Das DOM-Element wurde zu diesem Zeitpunkt nicht abgerufen.

Es wird also ein Fehler gemeldet.

Lösung 1:

Lassen Sie die Seite einfach das Element abrufen. Verwenden Sie „setTimeout“

setzeTimeout(()=>{
      dies.$refs.inputRef.focus();
},100)

Es ist möglich, mit diesem Problem auf folgende Weise umzugehen;

Aber es wirkt sehr unprofessionell;

Lösung 2:

//Wenn die Komponente in der Ansicht entsprechend den neuesten Daten neu gerendert wird, führt die Funktion this.$nextTick(()=>{
    dies.$refs.inputRef.focus();
})

5. Kann die Änderung von v-if in v-show den Fokus erhalten?

Manche Leute sagen: Weil v-if dynamisch erstellt und zerstört wird; der Prozess der Erstellung und Zerstörung braucht Zeit! Deshalb kann v-if den Elementknoten nicht abrufen, was durch die Verwendung von v-show vermieden werden kann.

Glauben Sie, dass das, was Sie gesagt haben, Sinn macht?

Versuchen wir, v-if durch v-show zu ersetzen

<Vorlage>
    <div>
        <div>Ich bin eine Komponente</div>
        <div v-show="flag" class="sun" @click="handerClick">Eingabe anzeigen</div>
        <input v-show="!flag" ref="inputRef" class="yuelaing"/>
    </div>
</Vorlage>
<Skript>
Standard exportieren {
    Daten(){
        zurückkehren {
            Flagge: wahr,
        }
    },
    Methoden: {
        händerKlick(){
            diese.flagge=false;
            Konsole.log(diese.$refs.inputRef);
            dies.$refs.inputRef.focus();
        },
    },
}
</Skript>

6. Tatsächliche Ergebnisse

Wir stellten fest, dass die Seite zwar keinen Fehler meldete, aber nicht fokussiert war. Der Wechsel zu v-show löste dieses Problem offensichtlich nicht.

Der Grund für dieses Problem ist, dass nach this.flag=false in der untergeordneten Komponente der folgende Code sofort ausgeführt wird

dies.$refs.inputRef.focus();

Bei der Ausführung wurde die Ansicht jedoch noch nicht aktualisiert. Es handelt sich immer noch um die alte Seite und das DOM-Element kann zu diesem Zeitpunkt nicht abgerufen werden. Daher wird „undefiniert“ angezeigt. Deshalb können wir uns nach dem Hinzufügen einer Verzögerung konzentrieren.

Wenn die Komponente auf der Grundlage der neuesten Daten in der Ansicht neu gerendert wird, wird die darin enthaltene Funktion ausgeführt

Dies ist die grundlegende Verwendung von $nextTick

dies.$nextTick(()=>{
    dies.$refs.inputRef.focus();
})

7. Kann ich den Fokus erhalten, indem ich eine Komponente in eine Seite umwandle?

Andere sagen: Da es sich um eine untergeordnete Komponente handelt, wird die untergeordnete Komponente nach der übergeordneten Komponente gerendert. Daher wurde kein Elementknoten erhalten.

Dies ist auch der Grund...

Ich habe das Gefühl, dass die Aussage des vorherigen Freundes nicht stimmt, um die Zweifel auszuräumen. Wir haben uns entschieden, die Unterkomponente in eine Seite umzuwandeln und zu sehen

<Vorlage>
  <div>
    <div>Ich bin eine Komponente</div>
    <div v-show="flag" class="sun" @click="handerClick">Eingabe anzeigen</div>
    <input v-show="!flag" ref="inputRef" class="yuelaing"/>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
        Flagge: wahr,
    }
  },
  Methoden: {
      händerKlick(){
        dies.flag=false;
        dies.$refs.inputRef.focus();
      },
  },
}
</Skript>

Wir haben festgestellt, dass es immer noch nicht funktioniert. Dies zeigt deutlich, dass Vue nach der Aktualisierung der Daten nicht in Echtzeit aktualisiert wird.

Zwischen der Aktualisierung der Daten und ihrer Anzeige auf der Seite besteht ein Zeitunterschied. Wenn wir die Seitendaten innerhalb dieses Zeitunterschieds aufrufen, können wir sie nicht abrufen.

Mit anderen Worten: Vue wird beim Aktualisieren des DOM asynchron ausgeführt

8. Warum gibt es $nextTick

Der Grund für $nextTick ist, dass nach einer Änderung der Daten in Vue das DOM in der Ansicht nicht sofort aktualisiert wird. Die Aktualisierung des DOM dauert einige Zeit.

Schauen wir uns das anhand eines kleinen Experiments an

<Vorlage>
  <div>
    <div ref="eindeutig">
      <h1>{{ Fortsetzung }}</h1>
    </div>
    <div class="sun" @click="handerClick">Wert ändern</div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
      Fortsetzung: „Ich bin der Standardwert“
    }
  },
  Methoden: {
      händerKlick(){
        this.cont = 'Ich habe den Standardwert geändert';
        Konsole.log('1==>',this.$refs.unique.innerText);
        dies.$nextTick(()=>{
          Konsole.log('2==>',this.$refs.unique.innerText);
        })
      },
  },
}
</Skript>

Wir haben festgestellt, dass der erste und der zweite Wert unterschiedlich sind, da die Aktualisierung des DOM in der Ansicht dazwischen erfolgen muss. Wir erhalten den Elementwert innerhalb dieser Differenz und es ist immer noch der alte Wert. Der erste Wert ist also der Anfangswert und der zweite Wert der geänderte Wert.

Da wir hoffen, die Daten zu aktualisieren, können wir den Wert im DOM immer noch sofort abrufen

Deshalb stellt vue $nextTick bereit, um dieses Problem zu lösen

9. Unterschied zwischen Vue.nextTick und this.$nextTick

Vue.nextTick ist eine globale Methode

this.$nextTick( [callback] ) ist eine Instanzmethode.

Wir alle wissen, dass eine Seite mehrere Instanzen haben kann, was bedeutet, dass this.$nextTick für eine bestimmte Instanz genau sein kann. Tatsächlich sind die beiden im Wesentlichen gleich.
Der einzige Unterschied besteht darin, dass das eine global und das andere auf eine bestimmte Instanz beschränkt ist. Die Genauigkeit ist unterschiedlich.

10. Ein kleiner Trick zur Verwendung von nextTick

Wir alle wissen, dass beim Rendern des gemounteten Lebenszyklus nicht 100 % garantiert werden kann, dass alle Unterkomponenten gerendert werden können. Daher können wir this.$nextTick in gemountet verwenden, um sicherzustellen, dass alle Unterkomponenten gerendert werden können.

Der gemountete Hook wird während des serverseitigen Renderings nicht aufgerufen.

montiert: Funktion () {
  dies.$nextTick(Funktion () {
    //Wenn sich die Daten ändern,
    //Nach dem erneuten Rendern der Ansicht die Methode darin ausführen //Dieser Satz ist gleichwertig mit:
   // Verzögern Sie den Rückruf bis zum nächsten DOM-Aktualisierungszyklus // Entspricht: Nach dem Ändern der Daten muss vor der Ausführung auf die Aktualisierung des DOM gewartet werden })
}

Zusammenfassen

Dies ist das Ende dieses Artikels über $nextTick. Weitere Informationen zu $nextTick finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!