सामग्री से लिया गया है द्वारा Adrià Fontcuberta
Vue प्रलेखन कहते हैं:
Vue.nextTick ([कॉलबैक, संदर्भ])
अगले DOM अपडेट चक्र के बाद निष्पादित किए जाने वाले कॉलबैक को हटाएं। DOM अपडेट के इंतजार के लिए कुछ डेटा बदलने के तुरंत बाद इसका उपयोग करें।
हम्म ..., अगर यह पहली बार में डराने वाला लगता है, तो चिंता न करें मैं इसे जितना संभव हो उतना सरल रूप में समझाने की कोशिश करूंगा। लेकिन पहले 2 चीजें हैं जो आपको पता होनी चाहिए:
इसका उपयोग असामान्य है। उन रजत जादू कार्डों में से एक की तरह। मैंने कई Vueऐप्स लिखे हैं और एक या दो बार अगली बार () में चला गया है।
एक बार कुछ वास्तविक उपयोग के मामलों को देखने के बाद यह समझना आसान है। आपके विचार प्राप्त करने के बाद, डर दूर हो जाएगा, और आपके बेल्ट के नीचे एक आसान उपकरण होगा।
चलो इसके लिए चलते हैं, फिर।
$ नेक्स्ट को समझना
हम प्रोग्रामर हैं, हम नहीं हैं? हम अपने प्रिय विभाजन का उपयोग करेंगे और .nextTick()बिट द्वारा विवरण का अनुवाद करने का प्रयास करने के लिए दृष्टिकोण को जीतेंगे। इसके साथ शुरू होता है:
कॉलबैक हटाएं
ठीक है, अब हम जानते हैं कि यह कॉलबैक स्वीकार करता है। तो यह इस तरह दिखता है:
Vue.nextTick(function () {
// do something cool
});
महान। यह कॉलबैक टाल दिया जाता है (यह इसी तरह मिलीनियल्स देरी से कहते हैं) जब तक…
अगले DOM अद्यतन चक्र।
ठीक है। हम जानते हैं कि Vue DOM अपडेट को एसिंक्रोनसली करता है । यह इन अद्यतनों को "संग्रहीत" रखने का एक तरीका है, जब तक कि उन्हें लागू करने की आवश्यकता न हो। यह अपडेट की एक कतार बनाता है और जरूरत पड़ने पर इसे फ्लश करता है। फिर, DOM "पैच" है और इसके नवीनतम संस्करण में अपडेट किया गया है।
क्या?
मुझे फिर से प्रयास करने दें: कल्पना करें कि आपका घटक वास्तव में आवश्यक है और स्मार्ट है जैसे this.potatoAmount = 3.Vue घटक को फिर से प्रस्तुत नहीं करेगा (और इस प्रकार DOM) स्वचालित रूप से। यह आवश्यक संशोधन को कतारबद्ध करेगा। फिर, अगले "टिक" (एक घड़ी में) के रूप में, कतार को फ्लश किया जाता है, और अपडेट लागू किया जाता है। टाडा!
ठीक है! तो हम जानते हैं कि हम nextTick()एक कॉलबैक फ़ंक्शन को पास करने के लिए उपयोग कर सकते हैं जो डेटा सेट होने के बाद निष्पादित किया जाता है और DOM ने अपडेट किया है।
जैसा कि मैंने पहले कहा था ... अक्सर ऐसा नहीं है। "डेटा प्रवाह" दृष्टिकोण, जो Vue, React, और Google से दूसरे को चलाता है, जिसका मैं उल्लेख नहीं करूंगा, यह अधिकांश समय अनावश्यक बनाता है। फिर भी, कभी-कभी हमें DOM में कुछ तत्वों के प्रकट / गायब होने / संशोधित होने की प्रतीक्षा करने की आवश्यकता होती है। यह तब होता है जब नेक्स्ट काम आता है।
DOM अपडेट के इंतजार के लिए कुछ डेटा बदलने के तुरंत बाद इसका उपयोग करें।
बिल्कुल सही! यह परिभाषा का अंतिम टुकड़ा है जो Vue डॉक्स ने हमें प्रदान किया है। हमारे कॉलबैक के अंदर, DOM को अपडेट किया गया है ताकि हम इसके "सबसे अपडेटेड" वर्जन के साथ इंटरैक्ट कर सकें।
इसे साबित करो
ठीक है ठीक है। कंसोल देखें, और आप देखेंगे कि हमारे डेटा का मूल्य अगली बार के कॉलबैक में अपडेट किया गया है:
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>
एक उपयोग मामला
आइए इसके लिए कुछ उपयोगी उपयोग के मामले को परिभाषित करने का प्रयास करें nextTick।
कल्पना करें कि एक घटक के माउंट होने पर आपको कुछ कार्रवाई करने की आवश्यकता है। परंतु! घटक ही नहीं। आपको तब तक प्रतीक्षा करने की भी आवश्यकता है जब तक कि उसके सभी बच्चे डोम में आरोहित और उपलब्ध न हो जाएं। अरे नहीं! हमारे घुड़सवार हुक की गारंटी नहीं है कि पूरे घटक पेड़ प्रदान करता है।
यदि केवल हमारे पास अगले DOM अपडेट चक्र की प्रतीक्षा करने के लिए एक उपकरण था ...
hahaa:
mounted() {
this.$nextTick(() => {
// The whole view is rendered, so I can safely access or query
// the DOM. ¯\_(ツ)_/¯
})
}
संक्षेप में
इसलिए: nextTickडेटा सेट होने के बाद किसी फ़ंक्शन को निष्पादित करने का एक आरामदायक तरीका है, और DOM को अपडेट किया गया है।
आपको DOM की प्रतीक्षा करने की आवश्यकता है, हो सकता है क्योंकि आपको कुछ परिवर्तन करने की आवश्यकता है या आपको इसके सामान को लोड करने के लिए किसी बाहरी लाइब्रेरी की प्रतीक्षा करने की आवश्यकता है? इसके बाद नेक्स्ट यूज करें।
कुछ लोग अपने यूनिट परीक्षणों में नेक्स्टटीक का भी इस्तेमाल करते हैं ताकि यह सुनिश्चित हो सके कि डेटा अपडेट किया गया है। इस तरह, वे घटक के "अद्यतन संस्करण" का परीक्षण कर सकते हैं।
Vue.nextTick () या vm। $ NextTick ()?
चिंता मत करो। दोनों (लगभग) समान हैं। एक उदाहरण विधि है Vue.nextTick(), जबकि वैश्विक एपीआई विधि को संदर्भित करता है vm.$nextTick()। एकमात्र अंतर यह है कि vm.$nextTickएक संदर्भ को दूसरे पैरामीटर के रूप में स्वीकार नहीं किया जाता है। यह हमेशा this(उदाहरण के रूप में भी जाना जाता है) के लिए बाध्य है ।
ठंडक का एक आखिरी टुकड़ा
ध्यान दें कि nextTickएक रिटर्न देता है Promise, इसलिए हम पूर्ण-कूल के साथ जा सकते हैं async/awaitऔर उदाहरण में सुधार कर सकते हैं :
async mounted () {
this.message = 'updated'
console.log(this.$el.textContent) // 'not updated'
await this.$nextTick()
console.log(this.$el.textContent) // 'updated'
}
nextTick। यहां दस्तावेज दिया गया है ।