قوانین اولویت A : ضروری ​

این قوانین به جلوگیری از خطاها کمک می‌کنند، پس حتماً آنها را یاد بگیرید و همیشه از آنها پیروی کنید. ممکن است استثناهایی وجود داشته باشد، اما باید بسیار نادر باشند و توسط کسانی که در vue و جاوااسکریپت حرفه‌ای هستند، اعمال شوند.

از نام‌های چند کلمه‌ای برای کامپوننت‌ها استفاده کنید ​

نام کامپوننت‌های استفاده شده باید همیشه چند کلمه‌ای باشند، به جز برای کامپوننت ریشه یا همان کامپوننت App. به این صورت از ناسازگاری با تگ‌های HTML جلوگیری می‌شود، چون تگ‌های HTML همیشه یک کلمه‌ای هستند.

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

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

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

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

تعریف دقیقی از پراپ‌ها ارائه دهید ​

در کد های متعهدانه، تعاریف پراپ باید همیشه تا جایی که امکان دارد مشخص و شامل حداقل یک تایپ باشد.

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

props: {
  status: String
}

// even better!
props: {
  status: {
    type: String,
    required: true,

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

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

const props = defineProps({
  status: String
})

// even better!

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

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

از v-for با key استفاده کنید ​

استفاده از key همراه با v-for در کامپوننت‌ها الزامی است تا وضعیت هر کامپوننت در سرتاسر زیرشاخه‌ها حفظ شود. حتی برای المنت‌ها، بهتره که برای ایجاد رفتار قابل پیش بینی مثل ثبات آبجکت در انیمیشن استفاده بشه.

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

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

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

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

از استفاده v-if با v-for اجتناب کنید ​

هرگز از v-if به همراه v-for روی یک المنت استفاده نکنید.

دو مورد رایج وجود دارد که ممکن است این کار لازم به نظر رسد:

• برای فیلتر کردن آیتم‌های لیست (برای مثال v-for="user in users" v-if="user.isActive"‎). برای این حالت به جای users از یک computed برای فیلتر کردن استفاده کنید (مثال activeUsers).

• برای جلوگیری از رندر لیست در حالتی که لازم است hidden باشد (برای مثال v-for="user in users" v-if="shouldShowUsers"‎). برای این نوع موارد v-if رو به یک المنت کانتینر دیگر انتقال دهید (برای مثال ul، ol).

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

computed: {
  activeUsers() {
    return this.users.filter(user => user.isActive)
  }
}

const activeUsers = computed(() => {
  return users.filter((user) => user.isActive)
})

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

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

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

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

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

استفاده از استایل‌گذاری محدود به کامپوننت ​

برای اپلیکیشن‌ها، استایل سطح بالا در کامپوننت App و کامپوننت‌های layout ممکن است به صورت سراسری باشد، ولی برای کامپوننت‌های دیگر همیشه باید استایل‌ها به صورت scoped باشد.

این تنها در مورد Single-File Components مرتبط است. این موضوع نیازی به استفاده از scoped attribute ندارد. این محدود کردن می‌تواند از طریق ماژول‌های CSS، یک استراتژی مبتنی بر کلاس مانند BEM یا یک کتابخانه/توافق دیگر باشد.

اما کتابخانه‌های کامپوننت، بهتر است به جای استفاده از ویژگی scoped، از یک استراتژی مبتنی بر کلاس استفاده کنند.

این امر انجام تغییر در استایل‌های داخلی را آسان‌تر می‌کند، با نام‌گذاری‌های کلاس قابل فهم برای انسان که لازم نیست خیلی به خصوص باشد، اما هنوز احتمال وقوع تداخل را به شدت کاهش می‌دهند.

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

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

<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>
  <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>
  <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>