Vue js 3 - Reactivity Fundamentals

ওয়েব ডেভেলপমেন্ট
1

Vue 3-এর Reactivity System একটি মূল বৈশিষ্ট্য যা অ্যাপ্লিকেশনের ডেটার সাথে DOM এবং কম্পোনেন্টগুলির মধ্যে সিঙ্ক রাখে। যখন কোনো ডেটা পরিবর্তিত হয়, তখন Vue স্বয়ংক্রিয়ভাবে সম্পর্কিত DOM বা কম্পোনেন্ট আপডেট করে। এটি ডেভেলপারদের জন্য সহজ এবং কার্যকর ডেভেলপমেন্টের সুবিধা নিয়ে আসে।

Reactivity Fundamentals

Vue 3-এ রিঅ্যাক্টিভিটি দুটি মূল ধারণার উপর ভিত্তি করে কাজ করে:

  1. Reactive Data
  2. Tracking Changes and Updates

1. Reactive Data তৈরি করা

Vue 3 দুটি প্রধান ফাংশন ব্যবহার করে রিঅ্যাক্টিভ ডেটা পরিচালনা করে:

reactive()

reactive ফাংশন কোনো অবজেক্টকে রিঅ্যাক্টিভ ডেটায় রূপান্তর করে।

উদাহরণ:

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

console.log(state.count); // 0
state.count++;
console.log(state.count); // 1

যখন state.count পরিবর্তিত হয়, তখন Vue এই পরিবর্তন ট্র্যাক করে এবং সংশ্লিষ্ট UI আপডেট করে।

ref()

ref ফাংশন ব্যবহার করে কোনো প্রিমিটিভ ভ্যালুকে রিঅ্যাক্টিভ করা হয়।

উদাহরণ:

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 0
count.value++;
console.log(count.value); // 1
  • ref একটি ভ্যালুকে রিঅ্যাক্টিভ করে এবং এটি .value প্রপার্টি ব্যবহার করে অ্যাক্সেস করতে হয়।

2. Tracking Changes and Updates

Vue স্বয়ংক্রিয়ভাবে রিঅ্যাক্টিভ ডেটা পরিবর্তন ট্র্যাক করে। যখন রিঅ্যাক্টিভ ডেটা ব্যবহার করে UI আপডেট করা হয়, Vue এই পরিবর্তনগুলো DOM-এ প্রতিফলিত করে।

Template Example with reactive:

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">Count ++</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    const increment = () => {
      state.count++;
    };

    return { state, increment };
  }
};
</script>

Ref and Reactive Differences

Feature reactive() ref()
Data Type অবজেক্ট এবং অ্যারে প্রিমিটিভ ভ্যালু (string, number ইত্যাদি)
Access Syntax সরাসরি প্রপার্টি অ্যাক্সেস .value ব্যবহার করতে হয়
Use Case স্টেট ম্যানেজমেন্ট বা জটিল ডেটা স্ট্রাকচার সাধারণ বা একক ভ্যালু

3. Computed Properties

Vue-এর computed API ডেটা প্রসেসিং এবং ক্যালকুলেটেড ভ্যালুর জন্য ব্যবহৃত হয়। এটি রিঅ্যাক্টিভ ডেটার উপর নির্ভর করে।

উদাহরণ:

import { ref, computed } from 'vue';

const count = ref(2);
const double = computed(() => count.value * 2);

console.log(double.value); // 4
count.value++;
console.log(double.value); // 6

4. Watchers

রিঅ্যাক্টিভ ডেটার পরিবর্তন মনিটর করার জন্য watch ফাংশন ব্যবহার করা হয়। এটি নির্দিষ্ট ডেটার উপর নির্ভরশীল কার্যক্রম সম্পাদন করতে ব্যবহৃত হয়।

উদাহরণ:

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count Change: ${oldValue} to ${newValue}`);
});

count.value = 5; // Console: Count Change: 0 to 5

Vue 3 Reactivity System-এর সুবিধা:

  1. Efficiency: DOM-এর নির্দিষ্ট অংশ আপডেট হয়।
  2. Declarative Syntax: UI এবং ডেটার মধ্যে সহজ সংযোগ।
  3. Reusability: Computed এবং Watchers ব্যবহার করে ডেটা রিয়াক্টিভিটি সহজ হয়।

Vue 3-এর Reactivity System আপনাকে জটিল UI সহজে এবং কার্যকরভাবে তৈরি করার সুযোগ দেয়।

1 Like
2

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