رویه های مناسب Vue.js | به زبان ساده

Vue.js یک فریمورک ساخت وب‌اپلیکیشن با استفاده آسان است که می‌توانیم از آن برای توسعه اپلیکیشن‌های فرانت‌اند تعاملی استفاده کنیم. در این مقاله به بررسی رویه های مناسب Vue.js می‌پردازیم و روی شیوه نوشتن اپلیکیشن‌های Vue به روشی با نگهداری آسان و با پیروی از برترین رویه‌ها تمرکز می‌کنیم.

از مشخصه data روی کامپوننت استفاده کنید

مشخصه data در یک کامپوننت باید یک تابع و نه یک شیء باشد تا حالت کامپوننت با خارج به اشتراک گذاشته نشود. برای نمونه باید کدی مانند زیر بنویسیم:

1<template>
2  <div id="app">{{name}}</div>
3</template>
4<script>
5export default {
6  name: "App",
7  data() {
8    return {
9      name: "Jane"
10    };
11  }
12};
13</script>

به این ترتیب name با کامپوننت‌های دیگر به اشتراک گذاشته نمی‌شود.

از حالت کبابی (Kebab-Case) استفاده کنید

عناصر و کامپوننت‌ها باید در «حالت کبابی» (Kebab-Case) باشند. منظور از حالت کبابی این است که بخش‌های مختلف اسامی با استفاده از خط تیره (-) از هم جدا می‌شوند. به علاوه نام‌های رویدادهای خاص به صورت خودکار به حالت کبابی تبدیل می‌شوند. برای نمونه کد زیر را می‌توانیم در کامپوننت‌های تودرتو بنویسیم و رویدادهای جدیدی صادر کنیم:

• فایل components/CountButton.vue

1<template>
2  <div>
3    <button @click="increment">Increment</button>
4  </div>
5</template>
6<script>
7export default {
8  name: "count-button",
9  methods: {
10    increment() {
11      this.$emit("increase-count");
12    }
13  }
14};
15</script>

• فایل App.vue

1<template>
2  <div id="app">
3    {{count}}
4    <count-button @increase-count="count++"></count-button>
5  </div>
6</template>
7<script>
8import CountButton from "./components/CountButton.vue";
9export default {
10  name: "App",
11  components: {
12    CountButton
13  },
14  data() {
15    return {
16      count: 0
17    };
18  }
19};
20</script>

در کد فوق خطی مانند زیر داریم:

1this.$emit("increase-count");

که برای ارسال یک رویداد increase-count استفاده می‌شود که حالت کبابی است. ضمناً count-button را داریم که آن نیز در حالت کبابی است.

پراپ key را به دایرکتیو v-for اضافه کنید

آیتم‌های رندر شده با v-for باید یک prop به نام key داشته باشند که شامل یک کلید یکتا به صورت مقدار باشد که مشخصه شناسه مورد استفاده از سوی Vue است. این کلید به طور خاص در صورتی که بخواهیم آیتم‌ها را پس از رندر شدن دست‌کاری کنیم، مهم خواهد بود. برای نمونه می‌توانیم کدی مانند زیر بنویسیم:

1<template>
2  <div id="app">
3    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
4  </div>
5</template>
6<script>
7export default {
8  name: "App",
9  data() {
10    return {
11      items: [{ id: 1, name: "Jane" }, { id: 2, name: "Mary" }]
12    };
13  }
14};
15</script>

در کد فوق، یک prop به نام key با ID یکتا در فیلد id ارسال کرده‌ایم. مقدار این prop باید یکتا باشد و در حد امکان نباید اندیس آرایه باشد.

v-for و v-if را ترکیب نکنید

v-for و v-if نباید همراه با یکدیگر استفاده شوند. این کار توان محاسباتی بیشتری نیاز دارد، چون باید تک‌تک مداخل آرایه یا شیء را بررسی کنیم تا بفهمیم آیا با v-if نمایش یافته است یا نه. به جای آن باید از مشخصه‌های محاسبه‌شده برای فیلتر کردن آیتم‌هایی که نباید نمایش یابند به صورت زیر استفاده کنیم:

1<template>
2  <div id="app">
3    <div v-for="todo in todoTasks" :key="todo.id">{{todo.description}}</div>
4  </div>
5</template>
6<script>
7export default {
8  name: "App",
9  data() {
10    return {
11      tasks: [
12        { id: 1, description: "eat", done: false },
13        { id: 2, description: "drink", done: true },
14        { id: 3, description: "sleep", done: true },
15        { id: 4, description: "walk", done: false },
16        { id: 5, description: "read", done: false }
17      ]
18    };
19  },
20  computed: {
21    todoTasks() {
22      return this.tasks.filter(t => !t.done);
23    }
24  }
25};
26</script>

در کد فوق، مشخصه todoTasks را داریم که یک آرایه فیلترشده از وظایف بازگشت می‌دهد که مقدار done روی false تنظیم شده است. به این ترتیب لازم نیست آن‌ها را یک به یک با v-if بررسی کنیم، ‌زیرا آن‌ها را با v-for رندر کرده‌ایم. این وضعیت بسیار بهتر از کد زیر است:

1<template>
2  <div id="app">
3    <div v-if="!todo.done" v-for="todo in tasks" :key="todo.id">{{todo.description}}</div>
4  </div>
5</template>
6<script>
7export default {
8  name: "App",
9  data() {
10    return {
11      tasks: [
12        { id: 1, description: "eat", done: false },
13        { id: 2, description: "drink", done: true },
14        { id: 3, description: "sleep", done: true },
15        { id: 4, description: "walk", done: false },
16        { id: 5, description: "read", done: false }
17      ]
18    };
19  }
20};
21</script>

در صورتی که کدی مانند کد فوق در پروژه نوشته شده باشد، Vue CLI به ما هشدار می‌دهد.

سخن پایانی

برای تسریع در نوشتن اپلیکیشن‌ها و تمیزتر ساختن آن‌ها باید از «مشخصه‌های محاسبه‌شده» (Computed Properties) برای داده‌های مشتق‌شده از داده‌های دیگر استفاده کنیم. ضمناً باید از حالت کبابی برای نام‌های رویدادها و کامپوننت‌ها استفاده کنیم تا انسجام کد حفظ شود.

در زمان رندر کردن آرایه‌ها نیز چند نکته وجود دارد که باید در نظر داشت. ما نباید از v-for و v-if هم‌زمان استفاده کنیم. به جای آن باید از مشخصه‌های محاسبه‌شده بهره بگیریم. برای این که به Vue کمک کنیم یک آیتم آرایه رندر شده را به صورت یکتا شناسایی کند، باید یک prop به نام key با یک مقدار یکتا برای هر مدخل ارسال کنیم. این مقدار به صورت معمول یک ID یکتا است و مشخصه data باید در کامپوننت‌ها به جای یک شیء باید همواره یک تابع باشد.