Treść pochodzi z By Adrià Fontcuberta
Dokumentacja Vue mówi:
Vue.nextTick ([wywołanie zwrotne, kontekst])
Odroczenie wywołania zwrotnego po następnym cyklu aktualizacji DOM. Użyj go natychmiast po zmianie niektórych danych, aby poczekać na aktualizację DOM.
Hmm ... jeśli na początku wydaje się on onieśmielający, nie martw się, postaram się to wyjaśnić tak prosto, jak to tylko możliwe. Ale najpierw są dwie rzeczy, o których powinieneś wiedzieć:
Jego użycie jest rzadkie. Jak jedna z tych srebrnych magicznych kart. Napisałem kilka Vueaplikacji i raz lub dwa wpadłem na nextTick ().
Łatwiej jest to zrozumieć, gdy zobaczysz prawdziwe przypadki użycia. Gdy wpadniesz na pomysł, strach minie, a będziesz miał pod paskiem przydatne narzędzie.
W takim razie zróbmy to.
Zrozumienie $ nextTick
Jesteśmy programistami, prawda? Skorzystamy z naszego ukochanego podejścia dziel i podbijaj, aby spróbować przetłumaczyć opis .nextTick()po kawałku. Zaczyna się od:
Odłóż oddzwonienie
Ok, teraz wiemy, że akceptuje oddzwonienie. Więc wygląda to tak:
Vue.nextTick(function () {
// do something cool
});
Świetny. To oddzwonienie jest odroczone (tak mówią milenialsi) do…
następny cykl aktualizacji DOM.
W porządku. Wiemy, że Vue wykonuje aktualizacje DOM asynchronicznie . Zawiera sposób na przechowywanie tych aktualizacji do czasu ich zastosowania. Tworzy kolejkę aktualizacji i opróżnia ją w razie potrzeby. Następnie DOM jest „łatany” i aktualizowany do najnowszej wersji.
Co?
Spróbuję jeszcze raz: wyobraź sobie, że twój komponent robi coś naprawdę istotnego i inteligentnego, na przykład this.potatoAmount = 3.Vue nie wyrenderuje komponentu (a tym samym DOM) automatycznie. Ustawi w kolejce wymaganą modyfikację. Następnie w następnym „tyknięciu” (jak w zegarze) kolejka jest opróżniana, a aktualizacja jest stosowana. Tada!
W porządku! Wiemy więc, że możemy użyć nextTick()do przekazania funkcji zwrotnej, która jest wykonywana zaraz po ustawieniu danych i zaktualizowaniu DOM.
Jak powiedziałem wcześniej… nie tak często. Podejście „przepływu danych”, które napędza Vue, React i inne rozwiązanie od Google, o którym nie wspomnę, sprawia, że przez większość czasu jest to niepotrzebne. Jednak czasami musimy poczekać, aż niektóre elementy pojawią się / znikną / zostaną zmodyfikowane w DOM. Wtedy przydaje się nextTick.
Użyj go natychmiast po zmianie niektórych danych, aby poczekać na aktualizację DOM.
Dokładnie! To ostatnia definicja, którą dostarczyła nam dokumentacja Vue. Wewnątrz naszego wywołania zwrotnego DOM został zaktualizowany, abyśmy mogli wchodzić w interakcje z „najbardziej zaktualizowaną” jego wersją.
Udowodnij to
Dobrze, dobrze. Zobacz konsolę, a zobaczysz, że wartość naszych danych jest aktualizowana tylko w wywołaniu zwrotnym 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
)
this.$nextTick(() => {
console.log(
'inside nextTick callback:', this.$el.textContent
)
})
}
})
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>
Przypadek użycia
Spróbujmy zdefiniować kilka przydatnych przypadków użycia nextTick.
Wyobraź sobie, że musisz wykonać jakąś czynność po zamontowaniu komponentu. ALE! nie tylko komponent. Musisz także poczekać, aż wszystkie jego elementy podrzędne zostaną zamontowane i dostępne w DOM. Cholera! Nasz zamontowany hak nie gwarantuje renderowania całego drzewa komponentów.
Gdybyśmy tylko mieli narzędzie do czekania na kolejny cykl aktualizacji DOM…
Hahaa:
mounted() {
this.$nextTick(() => {
// The whole view is rendered, so I can safely access or query
// the DOM. ¯\_(ツ)_/¯
})
}
W skrócie
A więc: nextTickto wygodny sposób na wykonanie funkcji po ustawieniu danych i zaktualizowaniu modelu DOM.
Musisz poczekać na DOM, może dlatego, że musisz wykonać jakąś transformację lub musisz poczekać, aż zewnętrzna biblioteka załaduje swoje rzeczy? Następnie użyj nextTick.
Niektórzy ludzie używają również nextTick w swoich testach jednostkowych, aby upewnić się, że dane zostały zaktualizowane. W ten sposób mogą przetestować „zaktualizowaną wersję” komponentu.
Vue.nextTick () czy vm. $ NextTick ()?
Nie martw się. Obie są (prawie) takie same. Vue.nextTick()odnosi się do globalnej metody API, a vm.$nextTick()jest metodą instancji. Jedyna różnica polega na tym, vm.$nextTickże nie akceptuje kontekstu jako drugiego parametru. Zawsze jest do tego przypisana this(nazywana również samą instancją).
Ostatni kawałek chłodu
Zwróć uwagę, że nextTickzwraca a Promise, więc możemy przejść do końca async/awaiti ulepszyć przykład:
async mounted () {
this.message = 'updated'
console.log(this.$el.textContent) // 'not updated'
await this.$nextTick()
console.log(this.$el.textContent) // 'updated'
}
nextTick. Udokumentowane tutaj .