Vue.js

উপস্থিতি

এই পৃষ্ঠায়

অগ্রাধিকার A নিয়ম: অপরিহার্য ​

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

বহু-শব্দ কম্পোনেন্টের নাম ব্যবহার করুন ​

রুট App কম্পোনেন্ট ব্যতীত ব্যবহারকারীর কম্পোনেন্টের নাম সর্বদা বহু-শব্দ হওয়া উচিত। বিদ্যমান এবং ভবিষ্যতের HTML কম্পোনেন্টগুলির সাথে এটি prevents conflicts, যেহেতু সমস্ত HTML কম্পোনেন্ট একটি একক শব্দ।

Bad

template
<!-- in pre-compiled templates -->
<Item />

<!-- in in-DOM templates -->
<item></item>

Good

template
<!-- in pre-compiled templates -->
<TodoItem />

<!-- in in-DOM templates -->
<todo-item></todo-item>

বিস্তারিত prop সংজ্ঞা ব্যবহার করুন ​

প্রতিশ্রুতিবদ্ধ কোডে, প্রপ সংজ্ঞাগুলি সর্বদা যতটা সম্ভব বিস্তারিত হওয়া উচিত, অন্তত প্রকার (গুলি) নির্দিষ্ট করে।

বিস্তারিত ব্যাখ্যা

বিশদ prop definitions দুটি সুবিধা আছে:

  • তারা কম্পোনেন্টের API নথিভুক্ত করে, যাতে কম্পোনেন্টটি কীভাবে ব্যবহার করা হয় তা দেখা সহজ হয়।
  • ডেভেলপমেন্টে, Vue আপনাকে সতর্ক করবে যদি কোনো কম্পোনেন্ট ভুলভাবে ফরম্যাট করা প্রপস প্রদান করা হয়, যা আপনাকে সম্ভাব্য ত্রুটির উৎস ধরতে সাহায্য করে।

Bad

js
// This is only OK when prototyping
props: ['status']

Good

js
props: {
  status: String
}
js
// Even better!
props: {
  status: {
    type: String,
    required: true,

    validator: value => {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].includes(value)
    }
  }
}

Bad

js
// This is only OK when prototyping
const props = defineProps(['status'])

Good

js
const props = defineProps({
  status: String
})
js
// Even better!

const props = defineProps({
  status: {
    type: String,
    required: true,

    validator: (value) => {
      return ['syncing', 'synced', 'version-conflict', 'error'].includes(
        value
      )
    }
  }
})

v-forএর সাথে key ব্যবহার করুন ​

সাবট্রির নিচে অভ্যন্তরীণ কম্পোনেন্টের অবস্থা বজায় রাখার জন্য কম্পোনেন্টগুলিতে v-for সহ key সর্বদাই প্রয়োজন। এমনকি কম্পোনেন্টগুলির জন্যও, অ্যানিমেশনগুলিতে অবজেক্ট কনস্টেন্সি এর মতো অনুমানযোগ্য আচরণ বজায় রাখা একটি ভাল অভ্যাস।

বিস্তারিত ব্যাখ্যা

ধরা যাক আপনার কাছে করণীয়গুলির একটি তালিকা রয়েছে:

js
data() {
  return {
    todos: [
      {
        id: 1,
        text: 'Learn to use v-for'
      },
      {
        id: 2,
        text: 'Learn to use key'
      }
    ]
  }
}
js
const todos = ref([
  {
    id: 1,
    text: 'Learn to use v-for'
  },
  {
    id: 2,
    text: 'Learn to use key'
  }
])

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

সমস্যা হল, এমন কিছু ক্ষেত্রে রয়েছে যেখানে DOM-এ থাকা কম্পোনেন্টগুলি মুছে ফেলা গুরুত্বপূর্ণ নয়। উদাহরণস্বরূপ, আপনি তালিকা সাজানোর অ্যানিমেট করতে <transition-group> ব্যবহার করতে চাইতে পারেন, অথবা যদি রেন্ডার করা কম্পোনেন্টটি <input> হয় তাহলে ফোকাস বজায় রাখতে পারেন। এই ক্ষেত্রে, প্রতিটি আইটেমের জন্য একটি অনন্য কী যোগ করা (যেমন :key="todo.id") Vue কে বলবে কিভাবে আরও অনুমানযোগ্য আচরণ করতে হবে।

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

Bad

template
<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

Good

template
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

v-for এর সাথে v-if এড়িয়ে চলুন ​

কখনই v-if একই কম্পোনেন্টে v-for ব্যবহার করবেন না।

দুটি সাধারণ ক্ষেত্রে এটি প্রলুব্ধ হতে পারে:

  • একটি তালিকায় আইটেম ফিল্টার করতে (যেমন v-for="user in user" v-if="user.isActive")। এই ক্ষেত্রে, usersকে একটি নতুন গণনাকৃত কম্পিউটেড প্রপার্টি দিয়ে প্রতিস্থাপন করুন যা আপনার ফিল্টার করা তালিকা (যেমন activeUsers) প্রদান করে।

  • একটি তালিকা লুকানো উচিত হলে রেন্ডার করা এড়াতে (যেমন v-for="user in user" v-if="shouldShowUsers")। এই ক্ষেত্রে, v-if একটি ধারক কম্পোনেন্টে সরান (যেমন ul, ol)।

বিস্তারিত ব্যাখ্যা

যখন Vue নির্দেশাবলী প্রসেস করে, v-if এর থেকে v-for এর চেয়ে বেশি অগ্রাধিকার থাকে, যাতে এই টেমপ্লেটটি:

template
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

একটি ত্রুটি নিক্ষেপ করবে, কারণ v-if নির্দেশটি প্রথমে মূল্যায়ন করা হবে এবং পুনরাবৃত্তি ভেরিয়েবল user এই মুহূর্তে বিদ্যমান নেই।

এটি পরিবর্তে একটি গণনাকৃত কম্পিউটেড প্রপার্টির উপর পুনরাবৃত্তি করে ঠিক করা যেতে পারে, যেমন:

js
computed: {
  activeUsers() {
    return this.users.filter(user => user.isActive)
  }
}
js
const activeUsers = computed(() => {
  return users.filter((user) => user.isActive)
})
template
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

বিকল্পভাবে, আমরা <li> কম্পোনেন্টটিকে মোড়ানোর জন্য v-for সহ একটি <template> ট্যাগ ব্যবহার করতে পারি:

template
<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">
      {{ user.name }}
    </li>
  </template>
</ul>

Bad

template
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

Good

template
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
template
<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">
      {{ user.name }}
    </li>
  </template>
</ul>

কম্পোনেন্ট-স্কোপড স্টাইলিং ব্যবহার করুন ​

অ্যাপ্লিকেশানগুলির জন্য, একটি শীর্ষ-স্তরের App' কম্পোনেন্ট এবং লেআউট কম্পোনেন্টগুলির ধরনগুলি বিশ্বব্যাপী হতে পারে, তবে অন্যান্য সমস্ত কম্পোনেন্ট সর্বদা ব্যাপ্ত হওয়া উচিত৷

এই জন্য শুধুমাত্র প্রাসঙ্গিক Single-File Components. এটার প্রয়োজন নেই যে scoped attribute ব্যবহার করা. স্কোপিং মাধ্যমে হতে পারে CSS modules, একটি ক্লাস-ভিত্তিক কৌশল যেমন BEM, অথবা অন্য লাইব্রেরি/সম্মেলন।

** কম্পোনেন্ট লাইব্রেরি, তবে, scoped অ্যাট্রিবিউট ব্যবহার করার পরিবর্তে একটি ক্লাস-ভিত্তিক কৌশল পছন্দ করা উচিত।**

এটি অভ্যন্তরীণ স্টাইলগুলিকে ওভাররাইড করা সহজ করে তোলে, মানব-পঠনযোগ্য শ্রেণির নামগুলির সাথে যেগুলির খুব বেশি নির্দিষ্টতা নেই, তবে এখনও একটি দ্বন্দ্বের ফলে হওয়ার সম্ভাবনা খুব কম।

বিস্তারিত ব্যাখ্যা

আপনি যদি একটি বড় প্রকল্প তৈরি করেন, অন্যান্য ডেভেলপমেন্টকারীদের সাথে কাজ করেন, বা কখনও কখনও 3য়-পক্ষের HTML/CSS (যেমন Auth0 থেকে) অন্তর্ভুক্ত করেন, তাহলে ধারাবাহিক স্কোপিং নিশ্চিত করবে যে আপনার স্টাইলগুলি শুধুমাত্র সেগুলির জন্য প্রযোজ্য কম্পোনেন্টগুলির জন্য প্রযোজ্য৷

scoped অ্যাট্রিবিউটের বাইরে, অনন্য ক্লাসের নাম ব্যবহার করা নিশ্চিত করতে সাহায্য করতে পারে যে 3য়-পক্ষের CSS আপনার নিজের HTML-এ প্রযোজ্য নয়। উদাহরণস্বরূপ, অনেক প্রকল্প button, btn, বা icon শ্রেণীর নাম ব্যবহার করে, তাই BEM-এর মতো কোনো কৌশল ব্যবহার না করলেও, একটি অ্যাপ-নির্দিষ্ট এবং/অথবা কম্পোনেন্ট-নির্দিষ্ট প্রিফিক্স যোগ করা (যেমন ButtonClose-icon) কিছু সুরক্ষা প্রদান করতে পারে।

Bad

template
<template>
  <button class="btn btn-close">×</button>
</template>

<style>
.btn-close {
  background-color: red;
}
</style>

Good

template
<template>
  <button class="button button-close">×</button>
</template>

<!-- Using the `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>
template
<template>
  <button :class="[$style.button, $style.buttonClose]">×</button>
</template>

<!-- Using CSS modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
template
<template>
  <button class="c-Button c-Button--close">×</button>
</template>

<!-- Using the BEM convention -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

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