İçerik alınmıştır tarafından Adria Fontcuberta
Vue belgeleri diyor ki:
Vue.nextTick ([geri arama, içerik])
Sonraki DOM güncelleme döngüsünden sonra yürütülecek geri aramayı erteleyin. DOM güncellemesini beklemek için bazı verileri değiştirdikten hemen sonra kullanın.
Hmm ..., ilk başta korkutucu geliyorsa endişelenme, bunu olabildiğince basit bir şekilde açıklamaya çalışacağım. Ama önce bilmeniz gereken 2 şey var:
Kullanımı nadirdir. Şu gümüş sihirli kartlardan biri gibi. Birkaç Vueuygulama yazdım ve nextTick () ile bir veya iki kez karşılaştım.
Bazı gerçek kullanım durumlarını gördükten sonra anlamak daha kolay. Fikri anladıktan sonra korku kaybolacak ve kemerinizin altında kullanışlı bir aletiniz olacak.
O zaman gidelim.
$ NextTick'i Anlamak
Biz programcıyız, değil mi? Tanımı .nextTick()parça parça çevirmek için sevgili böl ve yönet yaklaşımımızı kullanacağız . Şununla başlar:
Geri aramayı erteleyin
Tamam, şimdi geri aramayı kabul ettiğini biliyoruz. Yani şuna benziyor:
Vue.nextTick(function () {
// do something cool
});
Harika. Bu geri arama ertelenir (bu, binyıllar gecikti diyor) şu tarihe kadar
sonraki DOM güncelleme döngüsü.
Tamam. Vue'nun DOM güncellemelerini eşzamansız olarak gerçekleştirdiğini biliyoruz . Bu güncellemeleri, uygulanması gerekene kadar "saklamanın" bir yolunu sunar. Bir güncelleme sırası oluşturur ve gerektiğinde onu temizler. Ardından DOM "yamalanır" ve en son sürümüne güncellenir.
Ne?
Tekrar deneyeyim: Bileşeninizin, this.potatoAmount = 3.Vue'nun bileşeni (ve dolayısıyla DOM'u) otomatik olarak yeniden oluşturmayacağı gibi gerçekten gerekli ve akıllı bir şey yaptığını hayal edin . Gerekli değişikliği sıraya koyacaktır. Ardından, bir sonraki "onay" da (saatteki gibi), kuyruk temizlenir ve güncelleme uygulanır. Tada!
Tamam! Bu nedenle , veriler ayarlandıktan ve DOM güncellendikten hemen sonranextTick() yürütülen bir geri arama işlevini iletmek için kullanabileceğimizi biliyoruz .
Daha önce söylediğim gibi… o kadar sık değil. Vue, React ve diğerini Google'dan yönlendiren ve bahsetmeyeceğim "veri akışı" yaklaşımı çoğu zaman bunu gereksiz kılıyor. Yine de, bazen DOM'da bazı öğelerin görünmesini / kaybolmasını / değiştirilmesini beklememiz gerekir. Bu, nextTick'in kullanışlı olduğu zamandır.
DOM güncellemesini beklemek için bazı verileri değiştirdikten hemen sonra kullanın.
Kesinlikle! Bu, Vue belgelerinin bize sağladığı son tanımdır. Geri aramamızın içinde, DOM, "en güncel" sürümüyle etkileşim kurabilmemiz için güncellendi.
Kanıtla
Tamam tamam. Konsolu görün ve verilerimizin değerinin yalnızca nextTick'in geri araması içinde güncellendiğini göreceksiniz:
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>
Bir kullanım durumu
İçin bazı yararlı kullanım durumları tanımlamaya çalışalım nextTick.
Bir bileşen monte edildiğinde bazı işlemler yapmanız gerektiğini düşünün. FAKAT! sadece bileşen değil. Ayrıca, tüm alt öğeleri eklenene ve DOM'da kullanılabilir olana kadar beklemeniz gerekir. Lanet olsun! Takılı kancamız, bileşen ağacının tamamının işleyeceğini garanti etmez.
Keşke bir sonraki DOM güncelleme döngüsünü bekleyecek bir aracımız olsaydı…
Hahaa:
mounted() {
this.$nextTick(() => {
// The whole view is rendered, so I can safely access or query
// the DOM. ¯\_(ツ)_/¯
})
}
Kısaca
So:, nextTickveriler ayarlandıktan ve DOM güncellendikten sonra bir işlevi yürütmenin rahat bir yoludur.
DOM'u beklemeniz gerekiyor, belki biraz dönüşüm yapmanız gerektiğinden veya harici bir kitaplığın içeriğini yüklemesini beklemeniz gerektiğinden mi? Ardından nextTick'i kullanın.
Bazı kişiler, verinin güncellendiğinden emin olmanın bir yolu olarak birim testlerinde nextTick'i de kullanır. Bu şekilde, bileşenin "güncellenmiş sürümünü" test edebilirler.
Vue.nextTick () veya vm. $ NextTick ()?
Merak etmeyin. Her ikisi de (neredeyse) aynı. Vue.nextTick()küresel API yöntemini ifade ederken vm.$nextTick(), bir örnek yöntemidir. Tek fark, vm.$nextTickikinci parametre olarak bir bağlamı kabul etmemesidir. Her zaman bağlıdır this(örneğin kendisi olarak da bilinir).
Son bir serinlik parçası
Bunun a nextTickdöndürdüğüne dikkat edin Promise, böylece async/awaitörneği tam anlamıyla kullanabilir ve iyileştirebiliriz:
async mounted () {
this.message = 'updated'
console.log(this.$el.textContent) // 'not updated'
await this.$nextTick()
console.log(this.$el.textContent) // 'updated'
}
nextTick. Burada belgelenmiştir .