ভূমিকা

লেখাটা vue js কি সেটা নিয়ে নয়। ইন্টারনেট এ অসংখ্য তথ্য আছে এ নিয়ে।  লেখাটা মূলত vue js কিভাবে কাজ করে সেটা নিয়ে। কনসেপ্টটা কি সেটাই আলোচনা করব। এই লেখা পড়ার আগে JS, DOM নিয়ে ভাল ধারনা থাকলে ভাল। Vue ডকস কিছুটা পড়াশুনা করে এসে পড়লে It will make sense to you.

আপনার মাথায় হঠাত ভূত চাপসে আপনি ছবি আঁকবেন। চিন্তা করলেন ছবি আঁকতে গেলে শুরুতেই একটা ফ্রেম বাছাই করবেন, এরপর এর নির্দিষ্ট স্থান থেকে শুরু করে ছবি আঁকবেন। Vue এর কনসেপ্ট এর শুরুটা এরকম।

var vm = new Vue({
  el: '#app',
  data: data
})

Vue constructor এর মাধ্যমে আপনি Vue এর একটা root Instance ক্রিয়েট করলেন। এই constructor এর প্যারামিটার হিসেবে আপনাকে একটা object পাস করতে হবে Vue যেটাকে বলে options. আমাদের ব্রাউজারটার DOM tree হল একটা ফ্রেম। এই ফ্রেম এর নির্দিষ্ট জায়গায় আপনি আপনার ছবি আঁকা শুরু করবেন। তো el অপশন এর মাধ্যমে আপনি Vue কে একটি নির্দিষ্ট DOM node দেখায় দিয়ে বললেন তুমি এইখানে থেকে ছবি আঁকবা।

ছবির <div id=”#app”> অংশটা হল আমাদের ছবি আঁকার স্থান, যেটাকে আমরা el অপশন এর মাধ্যমে টার্গেট করেছি। এর মানে আমাদের পুরো এপটা এই অংশের মধ্যেই হবে।

এখন আমাদের ছবি কোন জায়গা জুড়ে হবে সেটা সিলেক্ট করলাম। এবার ছোট ছোট টুকরার মাধ্যমে আমরা ছবিটা আঁকবো। এই টুকরাগুলোকে Vue বলতেসে Component. এই component গুলা encapsulate. এর মানে হল এক টুকরার রঙ অন্য টুকরাতে যেতে পারবে না। আর এক component এর রঙ অন্য component এ নিতে হলে কিছু রুল ফলো করে নিতে হবে। এখানে রঙ বলতে Data কে বুঝানো হচ্ছে। তো এই component গুলোকে Vue তে লিখা হয় এভাবে।

Vue.component('my-component', {
 // options
}) 
// this is global registration, 
//you can register locally, see docs.

প্রতিটা component এর দুটো পার্ট থাকে। এগুলো হল Template এবং Options. এই টেম্পলেট হল HTML DOM elements আর component এর behavior বলা থাকে options এ। Options (opens new window) গুলো হলঃ data, methods, computed, props, lifeCycle hooks.

Data

Vue instance এ data একটা object. এই object এ আমরা আমাদের data গুলো স্টোর করি। কিন্তু component instance এ data option টা object না হয়ে function hobe. এর কারণ হল যেহেতু component গুলো encapsulated, আমরা চাই না এক component এর data অন্য component ব্যাবহার করুক)।

Methods

Event handler হিসেবে methods ব্যাবহার করা হয়। যেমন, DOM event listen করতে আমরা v-on directive (opens new window) ব্যবহার করি। v-on directive single JS expression এক্সেপ্ট করে। যেমন,

Vue.component('my-component', {
 template: `<div id="example-1">
 		 <button v-on:click="counter += 1"/>Add 1</button>
 		 <p>The button above has been clicked {{ counter }} times.</p>
</div>`,
data: {
   counter: 0
 }
})

কিন্তু অনেক সময় অনেক event এর logic complex হতে পারে। এজন্য v-on methods attribute ও accept করে।

Vue.component('my-component', {
 template: `<div id="example-2"/>
              <!-- `greet` is the name of a method defined below →
              <button v-on:click="greet"/>Greet</button>
            </div>`,
 data: {
   name: 'Vue.js'
 },
// define methods under the `methods` object
methods: {
   greet: function (event) {
     // `this` inside methods points to the Vue instance
     alert('Hello ' + this.name + '!')
     // `event` is the native DOM event
     if (event) {
       alert(event.target.tagName)
     }
   }
 }

})

Computed

Data/State কে computed করে সেটাকে reactive ব্যাবহারের জন্য আমরা Computed option টা ব্যবহার করব। যেমন,

Vue.component('my-component', {
 template: `<div id="example">
              <p>Original message: "{{ message }}"</p>
 		          <p>Computed reversed message: "{{ reversedMessage }}"</p>
            </div>`,
 data: {
   message: 'Hello'
 },

computed: {
   // a computed getter
   reversedMessage: function () {
     // `this` points to the vm instance
     return this.message.split('').reverse().join('')
   }
 }

})

Computed vs Methods

উপরের code থেকে এটা মাথায় আসতে পারে যে, একি result আমরা methods অপশন ব্যাবহার করেও পেতে পারি। দুই approach ই সেম।

//in template
<p>Reversed message: "{{ reverseMessage() }}"</p>

// in component
methods: {
 reverseMessage: function () {
   return this.message.split('').reverse().join('')
 }
}

এ দুটোর মদ্ধে পার্থক্য হল, computed property এর dependecy গুলোর উপর নির্ভরশীল। Computed property একবার execute হয়ে গেলে আর হয় না যতক্ষণ না এর কোন dependency পরিবর্তন হয়। এর মানে হল যতক্ষণ না data property এর message পরিবর্তন না হচ্ছে reversedMessage এ multiple একসেস করা হলেও সে function re-execute না করে আগের execute করা result টাই দেখাবে। নিচে আরেকটা উদাহরণ দেখি,

computed: {
 now: function () {
   return Date.now()
 }
}

now computed property টা কখনো update হবে না কারণ Date.now() এর কোন dependency data property তে নাই। যেহেতু dependency পরিবর্তন হলেই computed property update করে, এক্ষেত্রে সেটা হচ্ছে না।

Props

আগেই উল্লেখ করেছি component (opens new window) গুলো ছবির টুকরাগুলো। এখন এই টুকরাগুলি একটা আরেকটার ভেতর হতে পারে, পাশাপাশি হতে পারে। আবার এক টুকরার রঙ (data) আরেক টুকরায় নিতে হলে কিছু রুলস ফলো করতে হয়। এটা নিয়েই আলোচনা করব এখন।

Component গুলো যেহেতু একটা আরেকটার সাথে রিলেটেড থাকে, এদের রিলেশনশিপ সাধারণত Parent-Child হয়। হ্যাঁ রিলেশনশিপ Siblings, Cousins ও হতে পারে।

তো parent এর কখনো child কে ডাটা পাস করা লাগতে পারে কিংবা child এর কখনো parent কে। আবার parent, child দুটোকেই component maintain এবং reuse করার সুবিধার্থে decoupled রাখা জরুরী। সুতরাং parent, child এর ডাটা ফ্লো হয় one way (opens new window) তে। props down এবং events up। Parent props এর মাদ্ধমে ডাটা child এ পাস করে, আর child events এর মাধ্যমে parent কে পাস করে।

যখন parent এর ডাটা change/update হয় তখন ডাইনামিক props এর মাধ্যমে child এর ডাটাও আপডেট হয়। কিন্তু child এর ডাটা চেঞ্জ হলে props এর মাধ্যমে ডাটা parent এ আপডেট হবে না। এটাই One way data flow. তাহলে কিভাবে child, parent এর দিকে ডাটা পাস করবে? এখানেই আসে Custom Events এর কথা। এ নিয়ে আরও পড়তে Custom Events (opens new window)

Life Cycle Hooks

মনে করেন, আপনি জন্ম নিয়েছেন। আপনার জন্মের আগে আপনার প্যারেন্টস কিছু স্টেপ নিয়েছিল। এরপর আপনি পৃথিবীতে আসলেন, আপনার লাইফ শুরু হল। নেক্সট স্টেপ এ আপনি স্কুল এ ভর্তি হলেন, স্কুল পাস করে কলেজ এ উঠবেন মাঝে কিছু সময় আছে, আপনি তখন ঘুরতে যেতে পারেন, কোন কোর্স করতে পারেন, সোশ্যাল কাজ করতে পারেন ইত্যাদি। এরপর আবার কলেজ পাস করে বিশ্ববিদ্যালয় উঠার মাঝে কিছু সময়। এভাবে জীবনের কিছু স্টেপ থাকে যা আপনাকে ordinary কাজের বাইরে অন্য কিছু করার সুযোগ দেয়।

প্রতিটা Vue/Component instance শুরু হবার সময় থেকে পুরো সময় কিছু স্টেপ পায়। এই স্টেপগুলোই Life Cycle Hooks. যেমন, instance এর হয়ত data observation করতে হতে পারে, DOM এ mount করা লাগতে পারে, DOM update করা লাগতে পারে।

এ নিয়ে আরো পড়তে Life Cycle Hooks (opens new window)

এখানে মোটামুটি ব্যসিক ধারনা দেয়ার চেষ্টা করা হয়েছে। Vue নিয়ে বিস্তারিত জানতে এর অফিশিয়াল ডকুমেন্টেশনই যথেষ্ট।