VUE JS IQ - Level 1 - Part 1

প্রশ্ন ১. Vue.js কী?

উত্তর:

Vue.js একটি প্রগতিশীল জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক, যা একক পেজ অ্যাপ্লিকেশন (SPA) তৈরি করতে ব্যবহৃত হয়। এটি প্রধানত ব্যবহারকারীর ইন্টারফেস তৈরির জন্য ব্যবহৃত হয় এবং Reactivity এবং Components-এর উপর ভিত্তি করে কাজ করে।

প্রশ্ন ২. Vue-এর প্রধান বৈশিষ্ট্য কী কী?

উত্তর:

Vue.js এর প্রধান বৈশিষ্ট্যগুলো হলো:

• Declarative Rendering: ডাটা পরিবর্তনের সাথে সাথে ডম (DOM) আপডেট হয়।
• Components: কোড পুনরায় ব্যবহারযোগ্য করার জন্য ব্যবহার করা হয়।
• Directives: HTML ট্যাগে বিশেষ অ্যাট্রিবিউট যেমন v-bind, v-model ব্যবহার করা হয়।
• Reactivity System: ডাটার পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়।
• Routing এবং State Management: Vue Router এবং Vuex ব্যবহার করা হয়।

প্রশ্ন ৩. Vue instance কী এবং এর ভূমিকা কী?

উত্তর:

Vue instance হল Vue অ্যাপ্লিকেশনের মূল অংশ। এটি একটি Vue অ্যাপ্লিকেশনকে ডম (DOM) এর সাথে সংযুক্ত করে এবং ডাটা মডেল এবং ভিউয়ের মধ্যে সম্পর্ক স্থাপন করে।
উদাহরণ:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

প্রশ্ন ৪. Computed Properties এবং Methods-এর মধ্যে পার্থক্য কী?

উত্তর:

1. Computed Properties:

• এটি নির্ভরশীল ডাটার ভিত্তিতে একটি ক্যাশড (cached) ভ্যালু রিটার্ন করে।
• এটি তখনই পুনর্গণনা করে, যখন নির্ভরশীল ডাটা পরিবর্তিত হয়।

2. Methods:

• এটি প্রতিবার কল করার সময় নতুন ভ্যালু রিটার্ন করে।
• এটি কোনো ক্যাশিং করে না।

উদাহরণ:

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
},
methods: {
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

প্রশ্ন ৫. Vue-তে v-for কীভাবে কাজ করে?

উত্তর:

v-for একটি ডিরেক্টিভ, যা একটি লুপ তৈরি করতে ব্যবহার করা হয়। এটি লিস্টের প্রতিটি আইটেমের জন্য একটি DOM এলিমেন্ট জেনারেট করে।
উদাহরণ:

{{ item.name }}

প্রশ্ন ৬. Vue Lifecycle Hooks কী?

উত্তর:

Vue-তে একটি কম্পোনেন্টের লাইফসাইকেলের বিভিন্ন ধাপে কিছু মেথড থাকে, যেগুলোকে Lifecycle Hooks বলা হয়।
উদাহরণ:

• created: ডাটা ইনিশিয়ালাইজ করার জন্য।
• mounted: কম্পোনেন্ট DOM-এ যুক্ত হওয়ার পর।
• updated: কম্পোনেন্ট রি-রেন্ডার হওয়ার পর।
• destroyed: কম্পোনেন্ট DOM থেকে সরানোর সময়।

প্রশ্ন ৭. v-model কী?

উত্তর:

v-model একটি ডিরেক্টিভ, যা দুই দিকের ডাটা বাইন্ডিং (Two-way Data Binding) নিশ্চিত করে।
উদাহরণ:

{{ message }}

প্রশ্ন ৮. Vue Router কী?

উত্তর:

Vue Router একটি লাইব্রেরি, যা Vue.js-এ রাউটিং ব্যবস্থাপনা করতে ব্যবহৃত হয়। এটি বিভিন্ন URL-এর ভিত্তিতে ভিউ পরিবর্তন করতে সাহায্য করে।
উদাহরণ:

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  router
}).$mount('#app');

প্রশ্ন ৯. Vuex কী এবং এর ব্যবহারের ক্ষেত্র কী?

উত্তর:

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

প্রশ্ন ১০. Vue-তে Event Handling কীভাবে করা হয়?

উত্তর:

Vue-তে ইভেন্ট হ্যান্ডলিং করার জন্য v-on ডিরেক্টিভ বা সংক্ষেপে @ ব্যবহার করা হয়।
উদাহরণ:

Click Me

প্রশ্ন ১১. Vue.js-এ অ্যাসিনক্রোনাস ডাটা হ্যান্ডলিং কীভাবে করবেন?

উত্তর:

Vue.js-এ অ্যাসিনক্রোনাস ডাটা হ্যান্ডলিং করার জন্য API কল করতে Axios বা Fetch ব্যবহার করা হয়।
উদাহরণ:

methods: {
  async fetchData() {
    const response = await axios.get('https://api.example.com/data');
    this.data = response.data;
  }
}

প্রশ্ন ১২. Vue-তে watchers কী?

উত্তর:

watchers ডাটার পরিবর্তন পর্যবেক্ষণ করে এবং সেই অনুযায়ী কোড এক্সিকিউট করে।
উদাহরণ:

watch: {
  searchQuery(newVal, oldVal) {
    console.log('Search changed from', oldVal, 'to', newVal);
  }
}

প্রশ্ন ১৩. Composition API এবং Options API-এর মধ্যে পার্থক্য কী?

উত্তর:

1. Composition API:

• ফাংশন ভিত্তিক।
• Vue 3-এ পরিচিত হয়েছে।
• কোড আরও রিইউজেবল এবং মডুলার।

2. Options API:

• অবজেক্ট ভিত্তিক।
• Vue 2 এবং আগের ভার্সনে ব্যবহৃত হয়।

প্রশ্ন 14. Vue.js-এর Composition API কী? কেন এটি Options API থেকে আলাদা?

উত্তর:

Composition API হলো Vue 3-এ নতুন যুক্ত করা একটি ফিচার, যা ফাংশন ভিত্তিক কোড রিইউজ করার জন্য ব্যবহৃত হয়। এটি বড় স্কেলের অ্যাপ্লিকেশন তৈরি করতে সহায়ক।

Composition API বনাম Options API:

উদাহরণ:
Composition API:

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  }
};

Options API:

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

প্রশ্ন 15. Vue.js-এ অ্যাসিনক্রোনাস অপারেশন পরিচালনার সেরা পদ্ধতি কী?

উত্তর:

Vue.js-এ অ্যাসিনক্রোনাস অপারেশন পরিচালনার জন্য সাধারণত Promises বা async/await ব্যবহার করা হয়।

1. Axios বা Fetch API দিয়ে ডাটা ফেচ করা হয়।
2. অ্যাসিনক্রোনাস অপারেশনগুলো try-catch ব্লকের মাধ্যমে হ্যান্ডল করা হয়।

উদাহরণ:

methods: {
  async fetchData() {
    try {
      const response = await axios.get('https://api.example.com/data');
      this.data = response.data;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}

প্রশ্ন 16. Vue.js-এ Custom Directives কীভাবে তৈরি করবেন?

উত্তর:

Custom Directives এমন একটি পদ্ধতি, যা Vue-তে DOM ম্যানিপুলেশনের জন্য ব্যবহার করা হয়।

উদাহরণ:

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

ব্যবহার:

এটি একটি v-focus ডিরেক্টিভ তৈরি করে, যা ইনপুট ফিল্ডকে স্বয়ংক্রিয়ভাবে ফোকাস করে।

প্রশ্ন 17. Vue.js-এ Render Function কী এবং কেন এটি গুরুত্বপূর্ণ?

উত্তর:

Render Function একটি JavaScript ফাংশন, যা Vue কম্পোনেন্টকে ডাইনামিকভাবে DOM তৈরি করতে সক্ষম করে। এটি Template-এর বিকল্প।

কেন গুরুত্বপূর্ণ:

• ডাইনামিক কম্পোনেন্ট তৈরি।
• জটিল লজিক হ্যান্ডল করা।
• কোড আরও কাস্টমাইজড করা।

উদাহরণ:

export default {
  render(h) {
    return h('div', { class: 'hello' }, 'Hello World');
  }
};

প্রশ্ন 18. Vue-তে কীভাবে State Management করা হয়? Vuex এবং Pinia-এর মধ্যে পার্থক্য কী?

উত্তর:

Vue.js-এ State Management বড় অ্যাপ্লিকেশনগুলোর জন্য অত্যন্ত গুরুত্বপূর্ণ।

1. Vuex:

• Vue-এর জন্য ডিফল্ট স্টেট ম্যানেজমেন্ট টুল।
• কেন্দ্রীয় স্টেট স্টোর সরবরাহ করে।

2. Pinia:

• Vuex-এর হালকা ও সহজ সংস্করণ।
• Vue 3-এ সুপারিশ করা হয়।

প্রশ্ন 19. Vue.js-এ Lazy Loading কীভাবে কাজ করে?

উত্তর:

Lazy Loading একটি কৌশল, যা প্রয়োজন অনুযায়ী কম্পোনেন্ট বা রিসোর্স লোড করে। এটি অ্যাপ্লিকেশনের পারফরম্যান্স বাড়াতে সাহায্য করে।

উদাহরণ:

const About = () => import('./components/About.vue');

const routes = [
  { path: '/about', component: About }
];

প্রশ্ন 20. Vue.js-এ Slots এবং Scoped Slots-এর মধ্যে পার্থক্য কী?

উত্তর:

1. Slots:

• প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে কন্টেন্ট পাস করার জন্য।
• সাধারণত স্ট্যাটিক ডাটা পাস করতে ব্যবহৃত হয়।

2. Scoped Slots:

• চাইল্ড কম্পোনেন্ট থেকে ডাটা প্যারেন্টে ফেরত পাঠাতে ব্যবহৃত হয়।
• ডাইনামিক ডাটা শেয়ার করতে সক্ষম।

উদাহরণ:

Slots:

Static Content

Scoped Slots:

{{ data.message }}

প্রশ্ন 21. Vue.js-এ HOC (Higher-Order Components) কী এবং এটি কীভাবে কাজ করে?

উত্তর:

HOC হলো একটি ফাংশন, যা একটি কম্পোনেন্টকে ইনপুট হিসেবে গ্রহণ করে এবং একটি নতুন কম্পোনেন্ট আউটপুট হিসেবে প্রদান করে।

ব্যবহার:

• কোড রিইউজ।
• লজিক ভাগাভাগি করা।

উদাহরণ:

function withLogging(WrappedComponent) {
  return {
    mounted() {
      console.log('Component Mounted');
    },
    render(h) {
      return h(WrappedComponent);
    }
  };
}

প্রশ্ন 22. Vue 3-এ Teleport কী?

উত্তর:

Teleport Vue 3-এর একটি ফিচার, যা একটি কম্পোনেন্টকে DOM ট্রি থেকে অন্য স্থানে সরানোর অনুমতি দেয়।

উদাহরণ:

This is a modal

প্রশ্ন 23. Vue.js-এ SSR (Server-Side Rendering) কী এবং এটি কেন ব্যবহৃত হয়?

উত্তর:

SSR একটি কৌশল, যা সার্ভারে HTML জেনারেট করে এবং ব্রাউজারে প্রেরণ করে।

কেন ব্যবহৃত হয়:

• SEO-বান্ধব।
• দ্রুত লোডিং সময়।

SSR ফ্রেমওয়ার্ক:

• Nuxt.js

প্রশ্ন 24. Vue.js-এ কীভাবে WebSocket ইন্টিগ্রেট করবেন?

উত্তর:

Vue.js-এ WebSocket ইন্টিগ্রেট করে রিয়েল-টাইম ডাটা আপডেটের জন্য ব্যবহার করা হয়।

উদাহরণ:

export default {
  data() {
    return { messages: [] };
  },
  mounted() {
    this.socket = new WebSocket('wss://example.com/socket');
    this.socket.onmessage = (event) => {
      this.messages.push(event.data);
    };
  }
};

প্রশ্ন 25. Vue.js-এ Code Splitting কী?

উত্তর:

Code Splitting হলো অ্যাপ্লিকেশনের বিভিন্ন অংশকে আলাদা আলাদা চাংকে ভাগ করার প্রক্রিয়া, যা অ্যাপের লোডিং টাইম কমায়।

উদাহরণ:

const Login = () => import('./components/Login.vue');