Vue.js

উপস্থিতি

এই পৃষ্ঠায়

শব্দকোষ ​

এই শব্দকোষটি Vue সম্পর্কে কথা বলার সময় প্রযুক্তিগত শব্দগুলির অর্থ সম্পর্কে কিছু নির্দেশিকা প্রদান করার উদ্দেশ্যে তৈরি করা হয়েছে। এটির উদ্দেশ্য হল কিভাবে পরিভাষাগুলি সাধারণত ব্যবহার করা হয় তা বর্ণনা করা, সেগুলি কীভাবে ব্যবহার করা উচিত, তার নির্দেশমূলক  আলোচনা করা নয়। আশেপাশের প্রেক্ষাপটের উপর নির্ভর করে কিছু শব্দের সামান্য ভিন্ন অর্থ বা তারতম্য থাকতে পারে।

async component ​

একটি async component হল অন্য একটি কম্পোনেন্টের চারপাশে একটি মোড়ক যা মোড়ানো কম্পোনেন্টটিকে লেজি লোড করার অনুমতি দেয়। এটি সাধারণত নির্মিত .js ফাইলের আকার হ্রাস করার উপায় হিসাবে ব্যবহৃত হয়, তাদের ছোট ছোট খণ্ডে বিভক্ত করার অনুমতি দেয় যা শুধুমাত্র প্রয়োজন হলে লোড করা হয়।

Vue রাউটারের route components এর লেজি লোডিংয়ের জন্য একই বৈশিষ্ট্য রয়েছে, যদিও এটি Vue এর async components বৈশিষ্ট্য ব্যবহার করে না।

আরো বিস্তারিত জানার জন্য দেখুন:

compiler macro ​

একটি compiler macro একটি বিশেষ কোড যা একটি কম্পাইলার দ্বারা প্রক্রিয়া করা হয় এবং অন্য কিছুতে রূপান্তরিত হয়। এটি কার্যকরভাবে স্ট্রিং প্রতিস্থাপনের একটি বিশেষ কৌশল।

Vue এর SFC কম্পাইলার বিভিন্ন ম্যাক্রো সমর্থন করে, যেমন defineProps(), defineEmits() এবং defineExpose()। এই ম্যাক্রোগুলি ইচ্ছাকৃতভাবে সাধারণ জাভাস্ক্রিপ্ট ফাংশনগুলির মতো দেখতে ডিজাইন করা হয়েছে যাতে তারা জাভাস্ক্রিপ্ট / টাইপস্ক্রিপ্টের চারপাশে একই পার্সার এবং টাইপ অনুমান টুলিংয়ের সুবিধা নিতে পারে। যাইহোক, এগুলি প্রকৃত ফাংশন নয় যা ব্রাউজারে চালানো হয়। এগুলি বিশেষ স্ট্রিং যা কম্পাইলার সনাক্ত করে এবং বাস্তব জাভাস্ক্রিপ্ট কোড দিয়ে প্রতিস্থাপন করে যা আসলে চালানো হবে।

ম্যাক্রোর ব্যবহারে সীমাবদ্ধতা রয়েছে যা সাধারণ জাভাস্ক্রিপ্ট কোডে প্রযোজ্য নয়। উদাহরণস্বরূপ, আপনি ভাবতে পারেন যে const dp = defineProps আপনাকে defineProps এর জন্য একটি উপনাম তৈরি করার অনুমতি দেবে, কিন্তু এটি আসলে একটি ত্রুটির কারণ হবে। defineProps() এ কোন মানগুলি পাস করা যেতে পারে তারও সীমাবদ্ধতা রয়েছে, কারণ 'আর্গুমেন্টগুলি' কম্পাইলার দ্বারা প্রক্রিয়া করা উচিত এবং রানটাইমে নয়।

আরো বিস্তারিত জানার জন্য দেখুন:

component ​

component শব্দটি Vue এ নতুন কিছু নয়। এটি প্রায় সব UI ফ্রেমওয়ার্কের জন্য সাধারণ বিষয়। এটি UI এর একটি অংশ বর্ণনা করে, যেমন একটি বাটন বা চেকবক্স। কম্পোনেন্ট গুলোকে একত্রিত করে আরও বড় কম্পোনেন্ট তৈরি করা যেতে পারে।

Components হল একটি UI কে ছোট ছোট টুকরোতে বিভক্ত করার জন্য Vue দ্বারা প্রদত্ত প্রাথমিক প্রক্রিয়া। এটি রক্ষণাবেক্ষণযোগ্যতা উন্নত করতে এবং কোড পুনঃব্যবহার করতে সহায়তা করে।

একটি Vue component হল একটি অবজেক্ট। প্রোপার্টিগুলো ঐচ্ছিক, কিন্তু কম্পোনেন্ট রেন্ডার করার জন্য একটি টেমপ্লেট বা রেন্ডার ফাংশন প্রয়োজন। উদাহরণস্বরূপ, নিম্নলিখিত অবজেক্টটি একটি বৈধ কম্পোনেন্ট :

js
const HelloWorldComponent = {
  render() {
    return 'Hello world!'
  }
}

বাস্তবে, বেশিরভাগ Vue অ্যাপ্লিকেশন Single-File Components (.vue ফাইল) ব্যবহার করে লেখা হয়। যদিও এই কম্পোনেন্টগুলো প্রথম দেখায় অবজেক্ট বলে মনে হয় না, SFC কম্পাইলার সেগুলিকে একটি অবজেক্টে রূপান্তর করে, যা ফাইলের জন্য ডিফল্ট এক্সপোর্ট হিসাবে ব্যবহৃত হয়। বাহ্যিক দৃষ্টিকোণ থেকে, একটি .vue ফাইল হল একটি ES মডিউল যা একটি কম্পোনেন্ট অবজেক্ট এক্সপোর্ট করে।

কম্পোনেন্ট অবজেক্ট এর প্রোপার্টিগুলোকে সাধারণত options হিসেবে উল্লেখ করা হয়। এখান থেকেই Options API এর উৎপত্তি।

একটি কম্পোনেন্টের অপশনগুলো নির্দিষ্ট করে যে, কীভাবে সেই কম্পোনেন্টের উদাহরণ তৈরি করা উচিত। কম্পোনেন্টগুলি ধারণাগতভাবে ক্লাসের অনুরূপ, যদিও Vue তাদের সংজ্ঞায়িত করার জন্য প্রকৃত জাভাস্ক্রিপ্ট ক্লাস ব্যবহার করে না।

কম্পোনেন্ট দৃষ্টান্তগুলি উল্লেখ করতে আরও হালকাভাবে কম্পোনেন্ট শব্দটি ব্যবহার করা যেতে পারে।

আরো বিস্তারিত জানার জন্য দেখুন:

'কম্পোনেন্ট' শব্দটির সাথে নিম্নোক্ত আরও কিছু বিষয় সম্পর্কযুক্তঃ

composable ​

কম্পোজেবল শব্দটি Vue-তে একটি সাধারণ ব্যবহারের ধরণ বর্ণনা করে। এটি Vue এর একটি পৃথক বৈশিষ্ট্য নয়, এটি ফ্রেমওয়ার্কের Composition API ব্যবহার করার একটি উপায় মাত্র।

  • কম্পোজেবল একটি ফাংশন।
  • কম্পোজেবলগুলি এনক্যাপসুলেট এবং দণ্ডায়মান যুক্তি পুনঃব্যবহার করতে ব্যবহৃত হয়।
  • ফাংশনের নামটি সাধারণত use দ্বারা শুরু হয়, যাতে অন্যান্য ডেভেলপাররা জানেন যে এটি একটি কম্পোজেবল।
  • ফাংশনটি সাধারণত একটি কম্পোনেন্টের setup() ফাংশনের সিঙ্ক্রোনাস এক্সিকিউশনের সময় (অথবা, সমতুল্যভাবে, একটি <script setup> ব্লক চালানোর সময়) কল করা হবে বলে আশা করা হয়। এটি কম্পোজেবলের আহ্বানকে উপস্থিত কম্পোনেন্ট বিষয়বস্তুর সাথে সংযুক্ত করে, যেমন provide(), inject() বা onMounted() কলের মাধ্যমে।
  • কম্পোজেবল সাধারণত একটি প্লেইন অবজেক্ট ফেরত দেয়, রিয়াক্টিভ অবজেক্ট নয়। এই অবজেক্টে সাধারণত refs এবং ফাংশন থাকে এবং কলিং কোডের মধ্য দিয়ে তা ধ্বংস হয়ে যায়।

অনেক প্যাটার্নের মতো, নির্দিষ্ট কোনও কোড, লেবেলের জন্য যোগ্য কিনা তা নিয়ে কিছু মতবিরোধ থাকতে পারে। সমস্ত জাভাস্ক্রিপ্ট ইউটিলিটি ফাংশন কম্পোজেবল নয়। যদি একটি ফাংশন কম্পোজিশন API ব্যবহার না করে, তবে এটি সম্ভবত একটি কম্পোজেবল নয়। setup() এর সিঙ্ক্রোনাস এক্সিকিউশনের সময় যদি এটিকে কল করা না হয়, তাহলেও এটি একটি কম্পোজেবল নয়। কম্পোজেবলগুলি বিশেষভাবে দণ্ডায়মান লজিককে এনক্যাপসুলেট করতে ব্যবহৃত হয়, তারা ফাংশনের জন্য শুধুমাত্র একটি নামকরণের নিয়ম নয়।

কম্পোজেবল লেখার বিষয়ে আরও বিস্তারিত জানার জন্য Guide - Composables দেখুন।

Composition API ​

কম্পোজিশন API হল Vue-তে কম্পোনেন্ট এবং কম্পোজেবল লেখার জন্য ব্যবহৃত ফাংশনের একটি সংগ্রহ।

শব্দটি কম্পোজিশন লিখতে ব্যবহৃত দুটি প্রধান স্টাইলের একটি, অন্যটি হল অপশন API। কম্পোজিশন এপিআই ব্যবহার করে লেখা কম্পোনেন্টগুলি হয় <script setup> বা একটি স্পষ্ট setup() ফাংশন ব্যবহার করে।

আরও বিস্তারিত জানার জন্য দেখুনঃ

Composition API FAQ

custom element ​

একটি কাস্টম কম্পোনেন্ট হল ওয়েব কম্পোনেন্ট স্ট্যান্ডার্ডের একটি বৈশিষ্ট্য, যা আধুনিক ওয়েব ব্রাউজারগুলিতে প্রয়োগ করা হয়। এটি আপনার এইচটিএমএল মার্কআপে একটি কাস্টম এইচটিএমএল কম্পোনেন্ট ব্যবহার করার ক্ষমতাকে বোঝায় যাতে পৃষ্ঠার সেই পয়েন্টে একটি ওয়েব কম্পোনেন্ট অন্তর্ভুক্ত করা যায়।

Vue-তে কাস্টম কম্পোনেন্টগুলি রেন্ডার করার জন্য বিল্ট-ইন সাপোর্ট রয়েছে এবং সেগুলিকে সরাসরি Vue কম্পোনেন্ট টেমপ্লেটগুলিতে ব্যবহার করার অনুমতি দেয়।

অন্য Vue কম্পোনেন্ট টেমপ্লেটের মধ্যে ট্যাগ হিসাবে Vue কম্পোনেন্ট অন্তর্ভুক্ত করার ক্ষমতা নিয়ে কাস্টম কম্পোনেন্টগুলিকে বিভ্রান্ত করা উচিত নয়। কাস্টম কম্পোনেন্টগুলি ওয়েব কম্পোনেন্ট তৈরি করতে ব্যবহৃত হয়, Vue কম্পোনেন্ট নয়।

আরো বিস্তারিত জানার জন্য দেখুন:

directive ​

directive শব্দটি v- উপসর্গ দিয়ে শুরু হওয়া টেমপ্লেট এট্রিবিউটস বা তাদের সমতুল্য শর্টহ্যান্ডসকে বোঝায়।

বিল্ট-ইন ডিরেক্টিভের মধ্যে রয়েছে v-if, v-for, v-bind, v-on এবং v-slot।

Vue কাস্টম ডিরেক্টিভ তৈরিতে সমর্থন করে, যদিও সেগুলি সাধারণত শুধুমাত্র DOM নোডগুলিকে সরাসরি ম্যানিপুলেট করার জন্য 'এস্কেপ হ্যাচ' হিসাবে ব্যবহৃত হয়। কাস্টম ডিরেক্টিভ সাধারণত বিল্ট-ইন ডিরেক্টিভের কার্যকারিতা পুনরায় তৈরি করতে ব্যবহার করা যাবে না।

আরো বিস্তারিত জানার জন্য দেখুন:

dynamic component ​

dynamic component শব্দটি এমন ক্ষেত্রে বর্ণনা করতে ব্যবহৃত হয় যেখানে কোন চাইল্ড কম্পোনেন্ট রেন্ডার করতে হবে এবং তা ডায়নামিকভাবে করতে হবে। সাধারণত, এটি <component :is="type"> দিয়ে করা হয়।

একটি ডায়নামিক কম্পোনেন্ট একটি বিশেষ ধরনের কম্পোনেন্ট নয়। যে কোন কম্পোনেন্ট একটি ডায়নামিক কম্পোনেন্ট হিসাবে ব্যবহার করা যেতে পারে। একটি কম্পোনেন্ট ডায়নামিক হবে কিনা তা পূর্বনির্ধারিত না হয়ে কম্পোনেন্ট এর উপর নির্ভর করে।

আরো বিস্তারিত জানার জন্য দেখুন:

effect ​

দেখুন reactive effect এবং side effect.

event ​

একটি প্রোগ্রামের বিভিন্ন অংশের মধ্যে যোগাযোগের জন্য ইভেন্টের ব্যবহার প্রোগ্রামিংয়ের বিভিন্ন ক্ষেত্রে সাধারণ। Vue-এর মধ্যে, শব্দটি সাধারণত স্থানীয় HTML ইলিমেন্ট ইভেন্ট এবং Vue কম্পোনেন্ট ইভেন্ট উভয় ক্ষেত্রেই প্রয়োগ করা হয়। উভয় ধরনের ইভেন্ট শোনার জন্য টেমপ্লেটগুলিতে ভি-অন ডিরেক্টিভ ব্যবহার করা হয়।

আরো বিস্তারিত জানার জন্য দেখুন:

fragment ​

ফ্র্যাগমেন্ট শব্দটি একটি বিশেষ ধরনের VNode কে বোঝায় যা অন্যান্য VNodes-এর জন্য অভিভাবক হিসাবে ব্যবহৃত হয়, কিন্তু এটি কোনো কম্পোনেন্ট নিজে রেন্ডার করে না।

নামটি নেটিভ DOM API-এ DocumentFragment এর অনুরূপ ধারণা থেকে এসেছে।

একাধিক রুট নোড সহ কম্পোনেন্টকে সমর্থন করার জন্য ফ্রেগমেন্ট ব্যবহার করা হয়। যদিও এই জাতীয় কম্পোনেন্টের একাধিক মূল রয়েছে বলে মনে হতে পারে, পর্দার পিছনে তারা 'রুট' নোডের অভিভাবক এবং একক রুট হিসাবে একটি ফ্রেগমেন্ট নোড ব্যবহার করে।

একাধিক ডায়নামিক নোড আবদ্ধ করার উপায় হিসাবে টেমপ্লেট কম্পাইলার দ্বারা ফ্রেগমেন্ট ব্যবহার করা হয়, যেমন যারা v-for বা v-if এর মাধ্যমে তৈরি। এটি VDOMপ্যাচিং অ্যালগরিদমে অতিরিক্ত ইঙ্গিত দেওয়ার অনুমতি দেয়। এর বেশিরভাগই অভ্যন্তরীণভাবে পরিচালনা করা হয়, তবে একটি জায়গায় আপনি সরাসরি এটির মুখোমুখি হতে পারেন। সেটি হল v-for সহ <template> ট্যাগে একটি key ব্যবহার করা। সেই পরিস্থিতিতে, key টি VNode ফ্রেগমেন্টে একটি prop হিসাবে যোগ করা হয়।

ফ্র্যাগমেন্ট নোডগুলি বর্তমানে DOM-এ খালি টেক্সট নোড হিসাবে রেন্ডার করা হয়েছে, যদিও এটি একটি বাস্তবায়নের বিশদরূপ। আপনি যদি $el ব্যবহার করেন বা বিল্ট-ইন ব্রাউজার API-এর সাথে DOM-এ চলার চেষ্টা করেন তাহলে আপনি সেই টেক্সট নোডগুলির সম্মুখীন হতে পারেন।

functional component ​

কম্পোনেন্ট বলতে বোঝায় অপশন ধারণকারী কোনও বস্তু। আপনি যদি <script setup> ব্যবহার করেন তবে এটি সেভাবে প্রদর্শিত নাও হতে পারে, তবে .vue ফাইল থেকে এক্সপোর্টেড করা কম্পোনেন্ট অবজেক্ট হিসেবে মনে হবে।

একটি ফাংশনাল কম্পোনেন্ট হচ্ছে কম্পোনেন্ট এর বিকল্প যা ফাংশন দ্বারা নির্ধারণ করা হয়। সেই ফাংশনটি কম্পোনেন্টটির জন্য রেন্ডার ফাংশন হিসাবে কাজ করে।

একটি ফাংশনাল কম্পোনেন্টের নিজস্ব কোনো অবস্থা থাকতে পারে না। এদের জীবনচক্র স্বাভাবিক কম্পোনেন্টের মত না, তাই জীবনচক্র হুক ব্যবহার করা যায় না । এটি তাদের স্বাভাবিক, সংজ্ঞায়িত কম্পোনেন্টের চেয়ে সামান্য হালকা করে তোলে।

আরো বিস্তারিত জানার জন্য দেখুন:

hoisting ​

hoisting বলতে কোডের একটি অংশকে অন্য কোডের আগে চালানোর বিষয়টিকে বোঝায়। আগের কোনো বিন্দুতে জীবনপ্রবাহ শেষ হয়ে যায়।

জাভাস্ক্রিপ্ট কিছু নির্মাণের জন্য hoisting ব্যবহার করে, যেমন var, import এবং ফাংশন ঘোষণা।

একটি Vue কনটেক্সটে, টেমপ্লেট কম্পাইলার কর্মক্ষমতা উন্নত করতে স্ট্যাটিক hoisting প্রয়োগ করে। একটি রেন্ডার ফাংশনে একটি টেমপ্লেট রূপান্তর করার সময়, স্ট্যাটিক বিষয়বস্তুর সাথে সামঞ্জস্যপূর্ণ VNodes একবার তৈরি করা যেতে পারে এবং তারপর পুনরায় ব্যবহার করা যেতে পারে। এই স্ট্যাটিক ভিনোডগুলিকে হোয়েস্টেড হিসাবে বর্ণনা করা হয়েছে কারণ এটি চালানোর আগে রেন্ডার ফাংশনের বাইরে তৈরি করা হয়। টেমপ্লেট কম্পাইলার দ্বারা উত্পন্ন স্ট্যাটিক অবজেক্ট বা অ্যারেগুলিতে হোয়েস্টিং অনুরূপ ফর্ম প্রয়োগ করা হয়।

আরো বিস্তারিত জানার জন্য দেখুন:

in-DOM template ​

একটি কম্পোনেন্টের জন্য একটি টেমপ্লেট নির্দিষ্ট করার বিভিন্ন উপায় আছে। বেশিরভাগ ক্ষেত্রে টেমপ্লেটটি একটি স্ট্রিং হিসাবে প্রদান করা হয়।

ইন-ডোম টেমপ্লেট  শব্দটি সেই দৃশ্যকে বোঝায় যেখানে টেমপ্লেটটি একটি স্ট্রিংয়ের পরিবর্তে DOM নোডের আকারে প্রদান করা হয়। Vue তারপর innerHTML ব্যবহার করে DOM নোডকে একটি টেমপ্লেট স্ট্রিংয়ে রূপান্তর করে।

সাধারণত, একটি ইন-ডোম টেমপ্লেট সরাসরি পৃষ্ঠার HTML-এ লেখা HTML মার্কআপ হিসাবে শুরু হয়। ব্রাউজার তারপর এটিকে DOM নোডগুলিতে পার্স করে, যা Vue innerHTML পড়ার জন্য ব্যবহার করে।

আরো বিস্তারিত জানার জন্য দেখুন:

inject ​

দেখুন provide / inject.

lifecycle hooks ​

একটি Vue কম্পোনেন্ট উদাহরণ একটি জীবনচক্রের মধ্য দিয়ে যায়। উদাহরণস্বরূপ, এটি তৈরি করা, মাউন্ট করা, আপডেট করা এবং আনমাউন্ট করা।

lifecycle hooks এই জীবনচক্রের ঘটনাগুলি শোনার একটি উপায়।

অপশন এপিআই এর সাথে, প্রতিটি হুক একটি পৃথক অপশন হিসাবে প্রদান করা হয়, যেমন mounted। কম্পোজিশন API, এর পরিবর্তে ফাংশন ব্যবহার করে, যেমন onMounted()।

আরো বিস্তারিত জানার জন্য দেখুন:

macro ​

দেখুন compiler macro.

named slot ​

একটি কম্পোনেন্টের একাধিক স্লট থাকতে পারে, সেগুলো নাম দ্বারা আলাদা করা হয়। ডিফল্ট স্লট ব্যতীত অন্য স্লটগুলিকে named slots হিসাবে উল্লেখ করা হয়।

আরো বিস্তারিত জানার জন্য দেখুন:

Options API ​

Vue কম্পোনেন্টগুলো অবজেক্ট ব্যবহার করে সংজ্ঞায়িত করা হয়। কম্পোনেন্ট অবজেক্ট এর প্রোপার্টিগুলোকে অপশন হিসাবে উল্লেখ করা হয়।

কম্পোনেন্টগুলো দুটি স্টাইলে লেখা যেতে পারে। একটি স্টাইল setup এর সাথে একত্রে Composition API ব্যবহার করে (অন্যথায় setup() বা <script setup> দ্বারা)। অন্য স্টাইলটি কম্পোজিশন API-এর থেকে একটু দুরে, অনুরূপ ফলাফল অর্জনের জন্য বিভিন্ন কম্পোনেন্ট অপশন ব্যবহার করে। এইভাবে ব্যবহৃত কম্পোনেন্ট অপশনগুলোকে অপশন API হিসাবে উল্লেখ করা হয়।

অপশন এপিআই-এর মধ্যে data(), computed, methods এবং created() অপশন আছে।

কিছু অপশন, যেমন props, emits এবং inheritAttrs, উভয় API এর সাথে কম্পোনেন্ট লেখার সময় ব্যবহার করা যেতে পারে। যেহেতু সেগুলি কম্পোনেন্ট অপশন, সেগুলি অপশন API-এর অংশ হিসেবে বিবেচিত হতে পারে। যাইহোক, যেহেতু এই অপশনগুলি setup() এর সাথেও ব্যবহার করা হয়, এটি সাধারণত দুটি কম্পোনেন্ট স্টাইলের মধ্যে ভাগ করা বলে মনে করলে বুঝতে সুবিধা হয়।

setup() ফাংশন নিজেই একটি কম্পোনেন্ট অপশন, তাই এটিকে অপশন API এর অংশ হিসাবে বর্ণনা করা যেতে পারে। যাইহোক, 'অপশন API' সাধারণত এভাবে ব্যবহৃত হয় না। অন্যদিকে, setup() ফাংশনটিকে কম্পোজিশন API-এর অংশ হিসাবে বিবেচনা করা হয়।

plugin ​

যদিও প্লাগইন  শব্দটি বিভিন্ন প্রেক্ষাপটে ব্যবহার করা যেতে পারে, Vue-এর একটি অ্যাপ্লিকেশনে কার্যকারিতা যোগ করার উপায় হিসাবে প্লাগইনের ধারণা বোঝানো হয়।

app.use(plugin) কল করে একটি অ্যাপ্লিকেশনে প্লাগইন যোগ করা হয়। প্লাগইন নিজেই হয় একটি ফাংশন বা একটি install ফাংশন সহ কোনো অবজেক্ট। সেই ফাংশনটি অ্যাপ্লিকেশনের উদাহরণে পাস করা হবে এবং তারপরে যা করতে হবে এটি তা করবে।

আরো বিস্তারিত জানার জন্য দেখুন:

prop ​

Vue তে prop শব্দটির তিনটি সাধারণ ব্যবহার রয়েছে:

  • কম্পোনেন্ট প্রপস
  • VNode প্রপস
  • স্লট প্রপস

কম্পোনেন্ট প্রপস হল যা বেশিরভাগ মানুষ প্রপস হিসাবে ভাবে। এগুলি স্পষ্টভাবে defineProps() বা props অপশন ব্যবহার করে একটি কম্পোনেন্ট দ্বারা সংজ্ঞায়িত করা হয়।

VNode props শব্দটি h()-এ দ্বিতীয় আর্গুমেন্ট হিসেবে পাস করা অবজেক্টের প্রোপার্টিকে বোঝায়। এর মধ্যে কম্পোনেন্ট প্রপস অন্তর্ভুক্ত থাকতে পারে, তবে তারা কম্পোনেন্ট ইভেন্ট, DOM ইভেন্ট, DOM অ্যাট্রিবিউট এবং DOM প্রোপার্টিজ অন্তর্ভুক্ত করতে পারে। আপনি সাধারণত VNode প্রপসের সম্মুখীন হবেন যদি আপনি সরাসরি VNodes ম্যানিপুলেট করার জন্য রেন্ডার ফাংশনগুলির সাথে কাজ করেন।

স্লট প্রপস হল একটি স্কোপড স্লটে পাস করা প্রোপার্টিজ।

সব ক্ষেত্রে, প্রপস এমন প্রোপার্টিজ যা অন্য কোথাও থেকে পাস করা হয়।

যদিও প্রপস শব্দটি প্রোপার্টিজ শব্দ থেকে উদ্ভূত হয়েছে, তবে প্রপস শব্দটি Vue-এর ক্ষেত্রে অনেক বেশি নির্দিষ্ট অর্থ বহন করে। প্রোপার্টির সংক্ষিপ্ত হিসাবে এটির ব্যবহার থেকে বিরত থাকতে হবে।

বিস্তারিত জানার জন্য দেখুন:

provide / inject ​

provide এবং inject হল আন্তঃ-কম্পোনেন্ট যোগাযোগের একটি রূপ।

যখন একটি কম্পোনেন্ট একটি মান প্রদান করে, তখন সেই কম্পোনেন্টের সমস্ত বংশধররা ইনজেক্ট ব্যবহার করে সেই মানটি দখল করতে পারে। ঠিক প্রপসের উল্টো, সরবরাহকারী কম্পোনেন্টটি সঠিকভাবে জানে না যে, কোন কম্পোনেন্টটি মান গ্রহণ করছে।

কখনও কখনও প্রপ ড্রিলিং এড়াতে প্রোভাইড এবং ইনজেক্ট ব্যবহার করা হয়। এগুলি একটি কম্পোনেন্টের স্লট বিষয়বস্তুর সাথে যোগাযোগ করার জন্য একটি অন্তর্নিহিত উপায় হিসাবেও ব্যবহার করা যেতে পারে।

প্রোভাইড অ্যাপ্লিকেশন স্তরেও ব্যবহার করা যেতে পারে, যা সেই অ্যাপ্লিকেশনের সমস্ত কম্পোনেন্টগুলির জন্য একটি মান তৈরি করে৷

বিস্তারিত জানার জন্য দেখুন:

reactive effect ​

একটি রিয়্যাক্টিভ ইভেন্ট  Vue এর রিয়্যাক্টিভিটি সিস্টেমের অংশ। এটি ফাংশনের নির্ভরতাগুলিকে ট্র্যাক করার এবং সেই ফাংশনগুলিকে পুনরায় চালানোর প্রক্রিয়াকে বোঝায় যখন সেই নির্ভরতার মানগুলি পরিবর্তিত হয়।

watchEffect() একটি ইফেক্ট তৈরি করার সর্বোত্তম উপায়। Vue এর বিভিন্ন অংশ অভ্যন্তরীণভাবে ইফেক্ট ব্যবহার করে। যেমন- কম্পোনেন্ট রেন্ডারিং আপডেট, computed() এবং watch()।

Vue শুধুমাত্র রিয়্যাক্টিভ ইভেন্টের মধ্যে রিয়্যাক্টিভ নির্ভরতা ট্র্যাক করতে পারে। যদি একটি প্রপার্টির মান রিয়্যাক্টিভ ইফেক্টের বাইরে থেকে নেয়া হয় তবে এটি রিয়্যাক্টিভিটি হারাবে, এই অর্থে যে Vue জানবে না পরবর্তীতে প্রপার্টিটি পরিবর্তিত হলে কী করতে হবে।

শব্দটি 'সাইড ইফেক্ট' থেকে উদ্ভূত। ইফেক্ট ফাংশন কল করা প্রোপার্টির মান পরিবর্তন করা হচ্ছে একটি সাইড ইফেক্ট।

আরও বিস্তারিত জানার জন্য দেখুন:

reactivity ​

সাধারণভাবে, রিয়্যাক্টিভিটি  বলতে ডেটা পরিবর্তনের প্রতিক্রিয়ায় স্বয়ংক্রিয়ভাবে ক্রিয়া সম্পাদন করার ক্ষমতা বোঝায়। উদাহরণস্বরূপ, DOM আপডেট করা বা ডেটার মান পরিবর্তন হলে নেটওয়ার্কে অনুরোধ করা।

Vue এর ক্ষেত্রে, রিয়্যাক্টিভিটি বলতে বোঝায়  বৈশিষ্ট্যের একটি সংগ্রহকে। এই  বৈশিষ্ট্যগুলি একত্রিত হয়ে একটি রিঅ্যাক্টিভিটি সিস্টেম  গঠন করে, যা রিঅ্যাক্টিভিটি API এর মাধ্যমে প্রকাশ করা হয়।

বিভিন্ন উপায়ে একটি রিয়্যাক্টিভিটি সিস্টেম বাস্তবায়ন করা যেতে পারে। উদাহরণস্বরূপ, এটি নির্ভরতা নির্ধারণের জন্য কোডের স্ট্যাটিক বিশ্লেষণের মাধ্যমে করা যেতে পারে। যাইহোক, Vue সেই ধরনের রিয়্যাক্টিভিটি সিস্টেম সমর্থন করে না।

অন্যদিকে, Vue এর রিয়্যাক্টিভিটি সিস্টেম রানটাইমে প্রপার্টি অ্যাক্সেস ট্র্যাক করে। এটি প্রোপার্টিগুলির জন্য প্রক্সি র‍্যাপার এবং গেটার/সেটার ফাংশন উভয় ব্যবহার করে।

আরও বিস্তারিত জানার জন্য দেখুন:

Reactivity API ​

রিঅ্যাকটিভিটি এপিআই  হল রিঅ্যাকটিভিটি সম্পর্কিত মূল Vue ফাংশনের একটি সংগ্রহ। এই কম্পোনেন্ট স্বাধীনভাবে ব্যবহার করা যেতে পারে. এতে ref(), reactive(), computed(), watch() এবং watchEffect() এর মতো ফাংশন অন্তর্ভুক্ত রয়েছে।

রিঅ্যাকটিভিটি এপিআই হল কম্পোজিশন এপিআই এর একটি উপসেট।

আরও বিস্তারিত জানার জন্য দেখুন:

ref ​

এই এন্ট্রিটি রিয়্যাক্টিভিটির ref ব্যবহার সম্পর্কে। টেমপ্লেটগুলিতে ব্যবহৃত ref অ্যাট্রিবিউটের জন্য, এটা টেমপ্লেট রেফ দেখুন।

ref হল Vue এর রিয়্যাক্টিভিটি সিস্টেমের অংশ। এটি একক রিয়্যাক্টিভ বৈশিষ্ট্য সহ একটি অবজেক্ট, যাকে বলা হয় ভ্যালু।

রেফ বিভিন্ন ধরনের আছে। উদাহরণস্বরূপ, ref(), shallowRef(), computed(), এবং customRef() ব্যবহার করে রেফ তৈরি করা যেতে পারে। একটি অবজেক্ট একটি রেফ কিনা তা পরীক্ষা করতে isRef() ফাংশনটি ব্যবহার করা যেতে পারে এবং রেফটি সরাসরি তার মানের পুনরায় নিয়োগের অনুমতি দেয় কিনা তা পরীক্ষা করতে isReadonly() ব্যবহার করা যেতে পারে।

আরও বিস্তারিত জানার জন্য দেখুন:

render function ​

একটি রেন্ডার ফাংশন  হল একটি কম্পোনেন্টের অংশ যা রেন্ডারিংয়ের সময় ব্যবহৃত VNodes তৈরি করে। টেমপ্লেটগুলি রেন্ডার ফাংশনে কম্পাইল করা হয়।

আরও বিস্তারিত জানার জন্য দেখুন:

scheduler ​

scheduler  হল Vue-এর অভ্যন্তরীণ অংশ যা কখন রিয়্যাক্টিভ ইফেক্ট চালানো হবে তা নিয়ন্ত্রণ করে।

রিয়্যাক্টিভ অবস্থা পরিবর্তিত হলে, Vue অবিলম্বে রেন্ডারিং আপডেটগুলি ট্রিগার করে না। অন্যদিকে, এটি একটি সারি ব্যবহার করে তাদের একসাথে ব্যাচ করে। এটি নিশ্চিত করে যে একটি কম্পোনেন্ট শুধুমাত্র একবার পুনরায় রেন্ডার করে, এমনকি যদি অন্তর্নিহিত ডেটাতে একাধিক পরিবর্তন করা হয়।

Watchers গুলোকে শিডিউলার সারি ব্যবহার করে ব্যাচ করা হয়। flush: 'pre' (ডিফল্ট) সহ ওয়াচারস কম্পোনেন্ট রেন্ডারিংয়ের আগে চলবে, যেখানে flush: 'post' সহ তারা কম্পোনেন্ট রেন্ডারিংয়ের পরে চলবে।

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

scoped slot ​

স্কোপড স্লট শব্দটি একটি স্লট বোঝাতে ব্যবহৃত হয় যা প্রপস গ্রহণ করে।

ঐতিহাসিকভাবে, Vue স্কোপড এবং নন-স্কোপড স্লটের মধ্যে অনেক বেশি পার্থক্য তৈরি করেছে। কিছু ক্ষেত্রে তাদের দুটি পৃথক বৈশিষ্ট্য হিসাবে গণ্য করা যেতে পারে, একটি সাধারণ টেমপ্লেট সিনট্যাক্সে তারা একই রকম।

Vue 3-এ, সমস্ত স্লটগুলিকে স্কোপড স্লটের মতো আচরণ করার জন্য স্লট API গুলিকে সরলীকৃত করা হয়েছিল। যাইহোক, স্কোপড এবং নন-স্কোপড স্লটগুলির ব্যবহারের ক্ষেত্রে প্রায়শই পার্থক্য থাকে, তাই শব্দটি প্রপস সহ স্লটগুলিকে উল্লেখ করার উপায় হিসাবে এখনও কার্যকর প্রমাণিত হয়।

একটি স্লটে পাস করা প্রপগুলি শুধুমাত্র মূল টেমপ্লেটের একটি নির্দিষ্ট অঞ্চলের মধ্যে ব্যবহার করা যেতে পারে, এটাই স্লটের বিষয়বস্তু নির্ধারণের জন্য দায়ী৷ টেমপ্লেটের এই অঞ্চলটি প্রপসের জন্য একটি পরিবর্তনশীল সুযোগ হিসাবে আচরণ করে, তাই এর নাম 'স্কোপড স্লট'।

আরও বিস্তারিত জানার জন্য দেখুন:

SFC ​

দেখুন Single-File Component.

side effect ​

সাইড ইফেক্ট  শব্দটি Vue-এর জন্য নির্দিষ্ট নয়। এটি অপারেশন বা ফাংশন বর্ণনা করতে ব্যবহৃত হয় যা তাদের স্থানীয় সুযোগের বাইরে কিছু করে।

উদাহরণস্বরূপ, user.name = null এর মতো একটি প্রপার্টি সেট করার প্রেক্ষাপটে, এটা আশা করা যায় যে এটি user.name-এর মান পরিবর্তন করবে। যদি এটি অন্য কিছু করে, যেমন Vue এর রিয়্যাক্টিভিটি সিস্টেমকে ট্রিগার করে, তাহলে এটি একটি সাইড ইফেক্ট হিসাবে বর্ণনা করা হবে। Vue-এর মধ্যে, এই শব্দ থেকে রিয়্যাক্টিভ ইফেক্ট শব্দটির উৎপত্তি।

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

রেন্ডারিং বা গণনা করা প্রোপার্টি বর্ণনা করার সময় শব্দটি প্রায়শই ব্যবহৃত হয়। কোন সাইড ইফেক্ট নেই এমন কিছু রেন্ডারিংয়ের জন্য এটি সর্বোত্তম অনুশীলন হিসাবে বিবেচিত হয়। একইভাবে, একটি গণনাকৃত প্রোপার্টির জন্য গেটার ফাংশনের কোন সাইড ইফেক্ট থাকা উচিত নয়।

Single-File Component ​

একক-ফাইল কম্পোনেন্ট, বা SFC শব্দটি .vue ফাইল বিন্যাসকে বোঝায় যা সাধারণত Vue কম্পোনেন্টগুলির জন্য ব্যবহৃত হয়।

আরও দেখুন:

slot ​

স্লটগুলি চাইল্ড কম্পোনেন্টগুলিতে সামগ্রী প্রেরণ করতে ব্যবহৃত হয়। যেখানে প্রপগুলি ডেটা মানগুলি পাস করতে ব্যবহৃত হয়, স্লটগুলি HTML কম্পোনেন্ট এবং অন্যান্য Vue কম্পোনেন্টগুলির সমন্বয়ে সমৃদ্ধ সামগ্রী পাস করতে ব্যবহৃত হয়।

বিস্তারিত জানার জন্য দেখুন:

template ref ​

টেমপ্লেট রেফ  শব্দটি একটি টেমপ্লেটের মধ্যে একটি ট্যাগে একটি ref বৈশিষ্ট্য ব্যবহার করাকে বোঝায়। কম্পোনেন্ট রেন্ডার হওয়ার পরে, এই অ্যাট্রিবিউটটি এইচটিএমএল কম্পোনেন্ট বা টেমপ্লেটের ট্যাগের সাথে সম্পর্কিত কম্পোনেন্ট ইন্সট্যান্সের সাথে একটি সংশ্লিষ্ট প্রোপার্টি তৈরি করতে ব্যবহৃত হয়।

আপনি যদি Options API ব্যবহার করেন তাহলে রেফগুলি $refs অবজেক্টের প্রোপার্টির মাধ্যমে প্রকাশ করা হয়।

Composition API-এর সাথে, টেমপ্লেট refs একই নামের একটি রিয়্যাক্টিভ ref  তৈরি করে।

টেমপ্লেট রেফগুলিকে Vue এর রিয়্যাক্টিভ সিস্টেমে পাওয়া রিয়্যাক্টিভ রেফের সাথে বিভ্রান্ত করা উচিত নয়।

আরো বিস্তারিত জানার জন্য দেখুন:

VDOM ​

দেখুন virtual DOM.

virtual DOM ​

ভার্চুয়াল DOM (VDOM) শব্দটি Vue-এর জন্য নতুন কিছু নয়। এটি UI-তে আপডেটগুলি পরিচালনা করার জন্য বেশ কয়েকটি ওয়েব ফ্রেমওয়ার্ক দ্বারা ব্যবহৃত একটি সাধারণ পদ্ধতি।

ওয়েবপেজের বর্তমান অবস্থা উপস্থাপন করতে ব্রাউজার নোডের একটি ট্রি ব্যবহার করে। সেই ট্রি, এবং জাভাস্ক্রিপ্ট API গুলি এর সাথে ইন্টারঅ্যাক্ট করতে ব্যবহৃত হয়, এটাকেই ডকুমেন্ট অবজেক্ট মডেল, বা DOM হিসাবে উল্লেখ করা হয়।

DOM ম্যানিপুলেট করা কর্মক্ষমতা হ্রাসের কারণ। ভার্চুয়াল DOM এটি পরিচালনা করার জন্য একটি কৌশল প্রদান করে।

সরাসরি DOM নোড তৈরি করার পরিবর্তে, Vue কম্পোনেন্টগুলি তারা কী DOM নোড চায় তার একটি বিবরণ তৈরি করে। এই বর্ণনাকারীগুলি হল প্লেইন জাভাস্ক্রিপ্ট অবজেক্ট, যা VNodes (ভার্চুয়াল DOM নোড) নামে পরিচিত। VNodes তৈরি করা তুলনামূলকভাবে সহজ।

প্রতিবার কোনো কম্পোনেন্ট রি-রেন্ডার করার সময়, VNodes-এর নতুন ট্রি VNodes-এর আগের ট্রির সাথে তুলনা করা হয় এবং তারপরে কোনো পার্থক্য বাস্তব DOM-এ প্রয়োগ করা হয়। যদি কিছুই পরিবর্তিত না হয় তবে DOM স্পর্শ করার প্রয়োজন নেই।

Vue একটি হাইব্রিড পদ্ধতি ব্যবহার করে যাকে আমরা কম্পাইলার-ইনফর্মড ভার্চুয়াল DOM বলি। Vue এর টেমপ্লেট কম্পাইলার টেমপ্লেটের স্ট্যাটিক বিশ্লেষণের উপর ভিত্তি করে কর্মক্ষমতা অপ্টিমাইজেশন প্রয়োগ করতে সক্ষম। রানটাইমে একটি কম্পোনেন্টের পুরানো এবং নতুন VNode ট্রির সম্পূর্ণ তুলনা করার পরিবর্তে, Vue কম্পাইলার দ্বারা নিষ্কাশিত তথ্য ব্যবহার করতে পারে ট্রির যে অংশগুলি আসলে পরিবর্তন হতে পারে তার তুলনা কমাতে।

আরও জানার জন্য দেখুন:

VNode ​

একটি VNode হল একটি ভার্চুয়াল DOM নোড। এগুলি h() ফাংশন ব্যবহার করে তৈরি করা যেতে পারে। দেখুন virtual DOM আরও জানতে।

Web Component ​

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

Vue কম্পোনেন্ট ওয়েব কম্পোনেন্ট নয়, তবে defineCustomElement() ব্যবহার করা যেতে পারে একটি Vue কম্পোনেন্ট থেকে একটি কাস্টম কম্পোনেন্ট তৈরি করতে। Vue তার কম্পোনেন্টগুলির মধ্যে কাস্টম কম্পোনেন্টগুলির ব্যবহারকে সমর্থন করে।

বিস্তারিত জানার জন্য দেখুনঃ

GitHub-এ এই পৃষ্ঠাটি সম্পাদনা করুন