নেক্সটিক কী বা ভ্যুজেজে এটি কী করে

Question

আমি ডকগুলি পড়েছি, তবে আমি এটি বুঝতে পারি না। আমি জানি ডেটা, গণনা, ঘড়ি, পদ্ধতিগুলি কী করে তবে nextTick()ভ্যুজেসে কী ব্যবহার হয়?

Comments

বোঝার মূল ধারণাটি হ'ল ডিওএমটি অবিচ্ছিন্নভাবে আপডেট করা হয়েছে । আপনি ভিউতে কোনও মান পরিবর্তন করলে, পরিবর্তনটি তাত্ক্ষণিকভাবে ডিওমে রেন্ডার করা হয় না । পরিবর্তে, ভ্যু একটি ডিওএম আপডেট সারি করে এবং তারপরে, একটি টাইমারে, ডমকে আপডেট করে। সাধারণত, এটি এত দ্রুত ঘটে যে এটি কোনও তাত্পর্যপূর্ণ করে না, তবে কখনও কখনও ভ্যু রেন্ডার করার পরে আপনাকে রেন্ডারডোম আপডেট করতে হবে যা আপনি অবিলম্বে কোনও পদ্ধতিতে করতে পারবেন না কারণ আপডেটটি ঘটেনি hasn't এখনো. এই ক্ষেত্রে, আপনি ব্যবহার করবে nextTick। এখানে নথিভুক্ত ।

— বার্ট

উপরের https://stackoverflow.com/q/47634258/9979046 এ @ বার্ট যা বলেছে তা পরিপূরক করে , পরের টিক () ইউনিট টেস্টে ব্যবহার করা হবে, যখন আপনাকে ডিওএম (এইচটিএমএল) তে কোন উপাদান উপস্থিত রয়েছে কিনা তা পরীক্ষা করার প্রয়োজন হয়, উদাহরণস্বরূপ, আপনি যদি অ্যাক্সিয়োসের অনুরোধে কিছু তথ্য পান।

— অস্কার আলেঙ্কার

আমি কেন নেক্সটটিকের মতো কিছু অনুভব করব const nextTick = (callback, context) => { setTimeout(callback.bind(context), 0); };?

— 12:00

Answer 1

nextTick তোমার পরে আপনি ডাটা পরিবর্তন করে থাকেন ও VueJS আপনার ডেটা পরিবর্তন উপর ভিত্তি করে করে DOM আপডেট করেছে কিছু করতে অনুমতি দেয়, কিন্তু আগে ব্রাউজার অনুষ্ঠিত ঐ পৃষ্ঠাতে পরিবর্তন করেছেন।

সাধারণত, ডেভস অনুরূপ আচরণ অর্জনের জন্য নেটিভ জাভাস্ক্রিপ্ট ফাংশন সেট টাইমআউট ব্যবহার করে। তবে, setTimeoutব্রাউজারটি আপনার কলব্যাকের মাধ্যমে আপনাকে নিয়ন্ত্রণ ফিরিয়ে দেওয়ার আগে তা ছাড়াই নিয়ন্ত্রণ ব্যবহার করে ।

যাক, আপনি কিছু ডেটা পরিবর্তন করেছেন। ভ্যূ ডেটা ভিত্তিক ডিওএম আপডেট করে। মনে হয় DOM পরিবর্তনগুলি এখনও ব্রাউজার দ্বারা পর্দায় রেন্ডার করা হয় না। আপনি যদি ব্যবহার করেন তবে nextTickআপনার কলব্যাকটি এখন কল হবে। তারপরে, ব্রাউজারটি পৃষ্ঠা আপডেট করে। আপনি যদি ব্যবহার করেন তবে setTimeoutআপনার কলব্যাকটি কেবলমাত্র এখনই কল হবে।

আপনি নীচের মতো একটি ছোট উপাদান তৈরি করে এই আচরণটি কল্পনা করতে পারেন:

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
        msg: 'One'
    }
  },
  mounted() {
      this.msg = 'Two';

      this.$nextTick(() => {
          this.msg = 'Three';
      });
  }
}
</script>

আপনার স্থানীয় সার্ভার চালান। আপনি বার্তাটি Threeপ্রদর্শিত হচ্ছে দেখবেন ।

এখন, আপনার this.$nextTickসাথে প্রতিস্থাপন করুনsetTimeout

setTimeout(() => {
    this.msg = 'Three';
}, 0);

ব্রাউজারটি পুনরায় লোড করুন। আপনি দেখতে Twoআগে, দেখতে পাবেন Three।

লাইভ দেখতে এই ঝাঁকুনিটি দেখুন

কারণ, ভ্যু DOM- এ আপডেট করেছেন Two, ব্রাউজারকে নিয়ন্ত্রণ দিয়েছেন। ব্রাউজার প্রদর্শিত হয় Two। তারপরে, আপনার কলব্যাক বলে। ভ্যু ডমকে আপডেট করেছে Three। যা ব্রাউজারটি আবার প্রদর্শিত হয়েছিল।

সঙ্গে nextTick। ভ্যু এতে ডিওএমকে আপডেট করেছে Two। আপনার কলব্যাক কল। ভ্যু ডমকে আপডেট করেছে Three। তারপরে ব্রাউজারে নিয়ন্ত্রণ দিয়েছে। এবং, ব্রাউজার প্রদর্শিত হয় Three।

আশা করি এটা পরিষ্কার ছিল।

ভ্যু কীভাবে এটি প্রয়োগ করে তা বুঝতে, আপনাকে ইভেন্ট লুপ এবং মাইক্রোটাস্কগুলির ধারণাটি বুঝতে হবে ।

একবার আপনি এই ধারণাগুলি পরিষ্কার হয়ে গেলে (এর), পরের টিকের উত্স কোডটি পরীক্ষা করুন ।

Comments

একটি জিনিস যা আমি বুঝতে পারি না তা হল আপনি যখন বলবেন, "ডেটা আপডেট করে" আপনি কি প্রাক্তনের সাথে তৈরি আপডেটটি উল্লেখ করছেন: this.name = 'foo'বা আপনি পৃষ্ঠায় এইচটিএমএল উপাদানগুলির ইনজেকশনটি উল্লেখ করছেন?

— hidar

আমি এই প্রশ্নের ইতিহাসে কোথাও দেখতে পাচ্ছি না যেখানে তিনি বলেছেন "ভিউ ডেটা আপডেট করে" ... তিনি "ভু ডেটা ভিত্তিক ডিওএম আপডেট করেন" বলে থাকেন। যার অর্থ আপনি যখন this.name = 'foo'ভিউয়ের মাধ্যমে ডেটা সেট করেন তখন আপনার কনফিগার করা টেম্পলেট এবং ফাংশনগুলির উপর ভিত্তি করে ডেটাতে করা পরিবর্তনগুলি প্রতিফলিত করতে ডকুমেন্ট অবজেক্ট মডেলটি আপডেট করে।

— এডি জেঙ্কস

Answer 2

বিষয়বস্তু থেকে গ্রহণ করা হয়েছে দ্বারা Adria Fontcuberta

ভ্যু ডকুমেন্টেশন বলেছেন:

ভিউ.নেক্সটটিক ([কলব্যাক, প্রসঙ্গ])

পরবর্তী ডিওএম আপডেট চক্রের পরে কার্যকর করা কলব্যাকটি স্থগিত করুন। আপনি ডিওএম আপডেটের জন্য অপেক্ষা করতে কিছু ডেটা পরিবর্তন করার সাথে সাথেই এটি ব্যবহার করুন।

হুঁ ..., যদি এটি প্রথমে ভয় দেখায় তবে চিন্তা করবেন না আমি যতটা সম্ভব সহজ ব্যাখ্যা করার চেষ্টা করব। তবে প্রথমে 2 টি জিনিস আপনার জানা উচিত:

1. এটির ব্যবহার অস্বাভাবিক। সেই রূপোর যাদু কার্ডগুলির মধ্যে একটির মতো। আমি বেশ কয়েকটি Vueঅ্যাপ্লিকেশন লিখেছি এবং একবার বা দুবার নেক্সটটিক () এ চলেছি।

2. আপনি কিছু বাস্তব ব্যবহারের কেস দেখলে এটি বোঝা সহজ। আপনি ধারণাটি পাওয়ার পরে, ভয়টি দূর হবে এবং আপনার বেল্টের নীচে আপনার কাছে একটি কার্যকর সরঞ্জাম থাকবে tool

এর জন্য যাই, তাহলে।

বোঝা $ পরের টিক

আমরা প্রোগ্রামার, আমরা না? আমরা আমাদের প্রিয় বিভাজন এবং বিজয়ী পদ্ধতির ব্যবহার করব .nextTick()কিছুটা ধীরে ধীরে বর্ণনাটি অনুবাদ করার চেষ্টা করতে । এটি দিয়ে শুরু:

কলব্যাকটি স্থগিত করুন

ঠিক আছে, এখন আমরা জানি এটি একটি কলব্যাক গ্রহণ করে। সুতরাং এটির মতো দেখাচ্ছে:

Vue.nextTick(function () {
  // do something cool
});

দুর্দান্ত এই কলব্যাকটি পিছিয়ে দেওয়া হয়েছে (সহস্রাব্দগুলি এভাবে বিলম্ব করে বলে)…

পরবর্তী ডিওএম আপডেট চক্র।

ঠিক আছে. আমরা জানি যে ভ্যূ সিঙ্কক্রোনালিভাবে ডিওএম আপডেটগুলি করে । এই আপডেটগুলি প্রয়োগ করার প্রয়োজন না হওয়া পর্যন্ত এটি "সঞ্চিত" রাখার একটি উপায় বৈশিষ্ট্যযুক্ত। এটি আপডেটগুলির একটি সারি তৈরি করে এবং যখন প্রয়োজন হয় তখন এটি ফ্লাশ করে। তারপরে, ডিওএমটিকে "প্যাচড" করা হয়েছে এবং এটি সর্বশেষ সংস্করণে আপডেট করা হয়েছে।

কি?

আমাকে আবার চেষ্টা করতে দিন: কল্পনা করুন যে আপনার উপাদানটি সত্যই প্রয়োজনীয় এবং স্মার্ট হিসাবে কিছু করেছে যা this.potatoAmount = 3.ভ্যু উপাদানটি (এবং এইভাবে ডম) স্বয়ংক্রিয়ভাবে পুনরায় রেন্ডার করবে না। এটি প্রয়োজনীয় সংশোধনী সারি করবে। তারপরে, পরবর্তী "টিক" তে (একটি ঘড়ির মতো), সারিটি ফ্লাশ করা হয় এবং আপডেটটি প্রয়োগ করা হয়। তদা!

ঠিক আছে! সুতরাং আমরা জানি যে আমরা nextTick()একটি কলব্যাক ফাংশনটি পাস করতে ব্যবহার করতে পারি যা ডেটা সেট হয়ে যাওয়ার পরে এবং ডম আপডেট হয় তার ঠিক পরে কার্যকর করা হয়।

যেমনটি আমি আগে বলেছি… প্রায়শই নয়। "ডেটা প্রবাহ" পদ্ধতির যা ভ্যু, রিএ্যাক্ট এবং Google এর অন্য একটিটিকে চালিত করে, যা আমি উল্লেখ করব না, এটি বেশিরভাগ সময় অপ্রয়োজনীয় করে তোলে। তবুও, কখনও কখনও আমাদের ডিওমে কিছু উপাদান উপস্থিত / অদৃশ্য / সংশোধিত হওয়ার জন্য অপেক্ষা করতে হয়। এটি হ'ল নেক্সটটিক কাজে আসবে।

আপনি ডিওএম আপডেটের জন্য অপেক্ষা করতে কিছু ডেটা পরিবর্তন করার সাথে সাথেই এটি ব্যবহার করুন।

হুবহু! এটি ভিউ ডকস আমাদের সরবরাহ করে এমন সংজ্ঞাটির শেষ অংশ। আমাদের কলব্যাকের ভিতরে, ডিওএম আপডেট করা হয়েছে যাতে আমরা এর "সর্বাধিক আপডেট হওয়া" সংস্করণটির সাথে ইন্টারেক্ট করতে পারি can

প্রমান কর

ঠিক আছে. কনসোলটি দেখুন এবং আপনি দেখতে পাবেন যে আমাদের ডেটার মানটি কেবল পরবর্তী টিকের কলব্যাকের অভ্যন্তরে আপডেট হয়েছে:

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।

কল্পনা করুন যে কোনও উপাদান মাউন্ট করা হলে আপনাকে কিছু ক্রিয়া সম্পাদন করতে হবে। কিন্তু! কেবল উপাদানই নয়। আপনার সমস্ত শিশুদের মাউন্ট করা এবং ডিওমে উপলব্ধ না হওয়া পর্যন্ত আপনাকে অপেক্ষা করতে হবে। ধিক! আমাদের মাউন্ট হুক গ্যারান্টি দেয় না যে পুরো উপাদান গাছ রেন্ডার করে।

কেবলমাত্র আমাদের যদি পরবর্তী ডিওএম আপডেট চক্রটির জন্য অপেক্ষা করার জন্য একটি সরঞ্জাম থাকে ...

হাহাহা:

mounted() {
  this.$nextTick(() => {
    // The whole view is rendered, so I can safely access or query
    // the DOM. ¯\_(ツ)_/¯
  })
}

সংক্ষেপে

সুতরাং: nextTickডেটা সেট হওয়ার পরে কোনও ফাংশন সম্পাদন করার জন্য একটি আরামদায়ক উপায় এবং ডিওএম আপডেট করা হয়েছে।

আপনাকে ডিওমের জন্য অপেক্ষা করতে হবে, কারণ আপনাকে কিছু রূপান্তর করতে হবে বা কোনও বাহ্যিক লাইব্রেরীর স্টাফ লোড করার জন্য আপনাকে অপেক্ষা করতে হবে? তারপরে নেক্সটিক ব্যবহার করুন।

কিছু লোক তাদের ইউনিট পরীক্ষায় নেক্সটটিক ব্যবহার করে যাতে ডেটা আপডেট হয়েছে তা নিশ্চিত করার উপায়। এইভাবে, তারা উপাদানটির "আপডেট হওয়া সংস্করণ" পরীক্ষা করতে পারে।

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'
}

Comments

"আপনার" ব্যাখ্যার শীর্ষে কেবল মূল লেখক এবং লিঙ্কটি যুক্ত করুন।

— রেনান সিডাল

কী আশ্চর্য ব্যাখ্যা! আপনার সময় এবং প্রচেষ্টার জন্য আপনাকে অনেক ধন্যবাদ।

— মুআআত আলহাদাদাদ

অভিশাপ, আপনি কেবলমাত্র পুরো মাঝারি পোস্টটি অনুলিপি করেছেন। ডাউনভোটড

— আলেকজান্ডার কিম

বিকাশকারীরা যখন গুগলের StackOverflowফলাফলগুলিতে উত্তর সন্ধান করে সাধারণত হয়, তখন উত্তরগুলির জন্য এসও হ'ল ডি-ফ্যাক্টো জায়গা, তবে ইন্টারনেটে এমন অনেকগুলি ভাল সংস্থান রয়েছে যা অনুসন্ধানের ফলাফলগুলিতে প্রদর্শিত নাও হতে পারে। সুতরাং আমি এই উত্তরের জন্য প্রায় আধ ঘন্টা ব্যয় করেছি, এটি কেবল আপনি অনুলিপি হিসাবে অনুলিপি করছেন না, শুরু থেকেই লেখককে জমা দেওয়া হয়েছিল। আপনি যদি পোস্টটি পছন্দ না করেন তবে ঠিক আছে। তবে আপনার অন্যের কাজের প্রতি শ্রদ্ধা করা উচিত

— হুমায়ুন আহমেদ

Answer 3

প্রতিক্রিয়াশীল সম্পত্তি (ডেটা) এ আপনি কিছু পরিবর্তন করার পরে ভ্যুটি উপাদানটি পুনরায় সরবরাহ করার পরে নেক্সট টিকটি মূলত আপনাকে কিছু কোড চালানোর অনুমতি দেয়।

// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
  // this function is called when vue has re-rendered the component.
})

// usage as a promise (2.1.0+, see note below)
Vue.nextTick()
  .then(function () {
      // this function is called when vue has re-rendered the component.
})

Vue.js ডকুমেন্টেশন থেকে:

পরবর্তী ডিওএম আপডেট চক্রের পরে কার্যকর করা কলব্যাকটি স্থগিত করুন। আপনি ডিওএম আপডেটের জন্য অপেক্ষা করতে কিছু ডেটা পরিবর্তন করার সাথে সাথেই এটি ব্যবহার করুন।

এটি সম্পর্কে আরও পড়ুন, এখানে ।

Comments

কিভাবে এটি আপডেট? এটাই আমি বুঝি না। আমি যদি vm.msg আপডেট করি তবে ডোমটি ইতিমধ্যে আপডেট হয়েছে কারণ সেখানে একটি নতুন পাঠ্য রয়েছে '' হ্যালো ".. তাই আমি কীভাবে আবার এটি আপডেট করব? উদাহরণস্বরূপ আপনি একটি

— পোঁদ

ঠিক আছে, আমি উত্তরটি সম্পাদনা করব এবং আমি আরও ব্যাখ্যা করার চেষ্টা করব।

— দক্ষিণ মিগলানি

@ হিদার আপনি একাধিক আপডেট করতে হবে এমন পরিস্থিতিতে আপনি এটি ব্যবহার করতে পারেন, তবে আপনি স্পষ্টভাবে বিভিন্ন ডোম চক্রের একে অপরকে রেন্ডার করতে চান

— দক্ষিণ মিগলানি

এটি আপনাকে প্রতি সেও ডিওএম আপডেট করার অনুমতি দেওয়ার জন্য নয়, ভ্যু দ্বারা করা পরিবর্তনগুলি দ্বারা প্রভাবিত / সংশোধিত হওয়ার পরে এটি (এটি আপডেট হওয়া, এর থেকে তথ্য পড়ুন ইত্যাদি) কিছু করার জন্য নয় (কারণ আপনি একটি প্রতিক্রিয়াশীল সম্পত্তি মান পরিবর্তন করেছেন) ইত্যাদি)।

— zenw0lf

এটি সহজতর করার একটি উদাহরণ ছিল।

— দক্ষিণ মিগলানি

Answer 4

নেক্সটটিক এবং সেটটাইমআউট ব্যবহারের মধ্যে পার্থক্য সম্পর্কে আরও স্পষ্টতই প্রশান্তের উত্তর তৈরি করতে, আমি তার ফিডলটি কাঁটা করেছি: এখানে

mounted() {    
  this.one = "One";
 
  setTimeout(() => {
    this.two = "Two"
  }, 0);
  
  //this.$nextTick(()=>{
  //this.two = "Two"
  //})}

আপনি ফ্রিডলে দেখতে পারেন যে সেটটাইমআউট ব্যবহার করার সময়, পরিবর্তনটি মানিয়ে নেওয়ার আগে উপাদানটি মাউন্ট হয়ে গেলে প্রাথমিক ডেটা খুব সংক্ষেপে জ্বলজ্বল করে। যদিও নেক্সটটিক ব্যবহার করার সময়, ব্রাউজারে রেন্ডার করার আগে ডেটা হাইজ্যাক, পরিবর্তিত হয়। সুতরাং, ব্রাউজারটি পুরানো কোনও জ্ঞান ছাড়াই আপডেট হওয়া ডেটা দেখায়। আশা করি যে দুটি পদক্ষেপগুলি এক ঝাঁকুনিতে সাফ করে।