ভিউতে Computed প্রোপার্টি – ভিতর ও বাহির।

VueJs এ নতুনদের জন্য computed প্রোপার্টি এক ধাধার নাম। অনেকেই বুঝতে পারেন না এর আসল চরিত্র যার কারনে ব্যবহার ও ঠিকমত করা হয়না। অথচ কম্পিউটেড প্রোপার্টির সঠিক ব্যবহার সহজ করতে পারে অনেক কমপ্লেক্স কাজ এবং বাড়াতে পারে ভিউ এপ্লিকেশনের পারফর্মেন্স। আজকে আমরা উদ্ঘাটন করব কম্পিউটেড প্রোপার্টির আসল চরিত্র(!)। বের হয়ে যাবে এর লীলাখেলা।

কম্পিউটেড প্রোপার্টি এবং ফাংশন দুজন একই কাজ করে বলা যায়। দুজনই প্রোসেস করে এবং রেজাল্ট রিটার্ন করে। কিন্তু এদের মধ্যে কিছু মৌলিক পার্থক্য আছে।

ডিপেন্ডেন্সি ট্র্যাকিং

একটা ফাংশনের কতকগুলো প্যারামিটার থাকতে পারে। প্যারামিটার হল ফাংশনের ডিপেন্ডেন্সি। যখন ফাংশনটাকে কল করা হয় তখন এর মধ্যে বাইরে থেকে আর্গুমেন্ট পাস করা হয়। বাইরের আর্গুমেন্ট যখন পরিবর্তন হবে তখন ফাংশন সেটা বুঝতে পারবেনা। তাকে পরিবর্তিত আর্গুমেন্ট দিয়ে আবার কল করলে তখন সে বুঝতে পারবে এবং সেই অনুযায়ী প্রোসেস করে রেজাল্ট রিটার্ন করবে। তাহলে কি দাড়াল? ডিপেন্ডেন্সি চেঞ্জ হলে নর্মাল জাভাস্ক্রিপ্ট ফাংশন সেটাকে ট্র্যাক করতে পারছেনা।

ঠিক এইখানেই কম্পিউটেড প্রোপার্টির কারামতি ! সে তার সকল ডিপেন্ডেন্সির লাইভ ট্র্যাকিং করে। যখনি ডিপেন্ডেন্সি চেঞ্জ হয় তখনি যুগের সাথে তাল মিলিয়ে সে নিজেকে আধুনিক করে ফেলে।

ভিউতে রিয়েক্টিভ বা রেফ ডাটা ইচ্ছাখুশিমত চেঞ্জ হয়। চেঞ্জ করা হয় আর কি ! তো প্রতিবার ডাটা চেঞ্জের সময় বারবার একই ফাংশন কল করা অসম্ভব। সেক্ষেত্রে কম্পিউটেড প্রোপার্টি রিয়েক্টিভ/রেফ ডাটার চেঞ্জের সাথে সাথেই তার ভিতরের প্রোসেস সেরে ফেলে রেজাল্ট রেডি করে রাখে।

ক্যাশিং

একটা নর্মাল ফাংশনকে যতবার কল করা হয় ততবার সে প্রোসেস করে রেজাল্ট রিটার্ন করে। কিন্তু কম্পিটেড প্রোপার্টি সেটা করেনা। সে একবারই প্রোসেস করে এবং রেজাল্ট ক্যাশে জমা রাখে। পরবর্তিতে যখন সেইম প্রোপার্টিকে ডাকা হয় তখন সে পূর্বের ক্যাশ থেকে ডাটা দেয়। ফলে কি হয়? প্রোসেস যত কম পারফর্মেন্স তত বেশি। সিম্পল।

এখন কতক্ষন সে ক্যাশ ধরে রাখবে? যতক্ষন না তার ডিপেন্ডেন্সি চেঞ্জ হয়। ডিপেন্ডেন্সি চেঞ্জ হলেই সে আবার প্রোসেস করবে এবং পুরাতন ডাটা ফেলে দিয়ে নতুন ডাটাকে ক্যাশ করে রাখবে।

সবিশেষে, ছোট্ট একটি উদাহরনে শেষ হবে আজকের গল্প,

<template>
  <div>
    <p>Computed Property: {{ fullName }}</p>
    <p>Function Result: {{ getFullName() }}</p>
  </div>
</template>

<script>
	import { ref, computed } from 'vue';
	const firstName = 'Mehedi';
	const lastName = 'Jaman';
	
	const fullName = computed(() => `${firstName} ${lastName}`);

	function getFullName(){
		return `${firstName} ${lastName}`;
	}
</script>

উপরের কোডে firstName এবং lastName দুইটা ডিপেন্ডেন্সি যার উপর ভিত্তি করে fullName জেনারেট করতে হবে। getFullName() হল রেগুলার ফাংশন যেটাকে কল করলে প্রতিবার সে প্রোসেস করে fullName দিবে। কিন্তু fullName হল একটি কম্পিউটেড প্রোপার্টি যে একবারই প্রোসেস করে fullName বানায়ে রেখে দেবে। শুধুমাত্র firstName অথবা lastName চেঞ্জ হলেই তবে fullName রি-রেন্ডার করবে।

কম্পিউটেড প্রোপার্টির আর একটি সৌন্দর্য হল এর কাজ ফাংশনের মত হলেও একে রেগুলার ভ্যারিয়েবলের মত করে লেখা যায়।