Il contenuto è stato tratto da By Adrià Fontcuberta
La documentazione di Vue dice:
Vue.nextTick ([callback, context])
Rimanda la richiamata da eseguire dopo il successivo ciclo di aggiornamento DOM. Usalo subito dopo aver modificato alcuni dati per attendere l'aggiornamento del DOM.
Hmm ..., se all'inizio sembra intimidatorio, non ti preoccupare cercherò di spiegarlo il più semplice possibile. Ma prima ci sono 2 cose che dovresti sapere:
Il suo utilizzo è raro. Come una di quelle carte magiche d'argento. Ho scritto diverse Vueapp e una o due volte mi sono imbattuto in nextTick ().
È più facile da capire una volta che hai visto alcuni casi d'uso reali. Dopo aver preso l'idea, la paura se ne andrà e avrai uno strumento utile sotto la cintura.
Allora proviamoci.
Capire $ nextTick
Siamo programmatori, no? Useremo il nostro amato approccio divide et impera per provare a tradurre la descrizione di .nextTick()poco a poco. Inizia con:
Rimanda la richiamata
Ok, ora sappiamo che accetta una richiamata. Quindi sembra così:
Vue.nextTick(function () {
// do something cool
});
Grande. Questa richiamata è rimandata (così dicono i millenial ritardata) fino a ...
il prossimo ciclo di aggiornamento DOM.
Va bene. Sappiamo che Vue esegue gli aggiornamenti DOM in modo asincrono . È dotato di un modo per mantenere questi aggiornamenti "memorizzati" fino a quando non è necessario applicarli. Crea una coda di aggiornamenti e la scarica quando necessario. Quindi, il DOM viene "patchato" e aggiornato alla sua ultima versione.
Che cosa?
Lasciami riprovare: immagina che il tuo componente faccia qualcosa di veramente essenziale e intelligente come this.potatoAmount = 3.Vue non rieseguirà automaticamente il rendering del componente (e quindi del DOM). Metterà in coda la modifica richiesta. Quindi, nel successivo "segno di spunta" (come in un orologio), la coda viene scaricata e l'aggiornamento viene applicato. Tada!
Va bene! Quindi sappiamo che possiamo usare nextTick()per passare una funzione di callback che viene eseguita subito dopo che i dati sono stati impostati e il DOM è stato aggiornato.
Come ho detto prima ... non così spesso. L'approccio del "flusso di dati" che guida Vue, React e l'altro di Google, che non menzionerò, lo rende per la maggior parte del tempo non necessario. Tuttavia, a volte dobbiamo aspettare che alcuni elementi appaiano / scompaiano / vengano modificati nel DOM. Questo è quando nextTick torna utile.
Usalo subito dopo aver modificato alcuni dati per attendere l'aggiornamento del DOM.
Esattamente! Questa è l'ultima parte della definizione che i documenti di Vue ci hanno fornito. All'interno del nostro callback, il DOM è stato aggiornato in modo da poter interagire con la versione "più aggiornata" di esso.
Provalo
Ok ok. Guarda la console e vedrai che il valore dei nostri dati viene aggiornato solo all'interno del callback di 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>
Un caso d'uso
Proviamo a definire qualche utile caso d'uso per nextTick.
Immagina di dover eseguire alcune azioni quando un componente è montato. MA! non solo il componente. È inoltre necessario attendere che tutti i suoi figli siano montati e disponibili nel DOM. Dannazione! Il nostro gancio montato non garantisce il rendering dell'intero albero dei componenti.
Se solo avessimo uno strumento per attendere il prossimo ciclo di aggiornamento DOM ...
Hahaa:
mounted() {
this.$nextTick(() => {
// The whole view is rendered, so I can safely access or query
// the DOM. ¯\_(ツ)_/¯
})
}
In poche parole
Quindi: nextTickè un modo comodo per eseguire una funzione dopo che i dati sono stati impostati e il DOM è stato aggiornato.
Devi aspettare il DOM, forse perché devi eseguire qualche trasformazione o devi aspettare che una libreria esterna carichi la sua roba? Quindi usa nextTick.
Alcune persone usano anche nextTick nei loro unit test per assicurarsi che i dati siano stati aggiornati. In questo modo, possono testare la "versione aggiornata" del componente.
Vue.nextTick () o vm. $ NextTick ()?
Non preoccuparti. Entrambi sono (quasi) la stessa cosa. Vue.nextTick()si riferisce al metodo API globale, mentre vm.$nextTick()è un metodo di istanza. L'unica differenza è che vm.$nextTicknon accetta un contesto come secondo parametro. È sempre associato a this(noto anche come istanza stessa).
Un ultimo pezzo di freschezza
Si noti che nextTickrestituisce a Promise, quindi possiamo andare completamente d'accordo async/awaite migliorare l'esempio:
async mounted () {
this.message = 'updated'
console.log(this.$el.textContent) // 'not updated'
await this.$nextTick()
console.log(this.$el.textContent) // 'updated'
}
nextTick. Documentato qui .