اشتباهات رایج استفاده از Vue.js که باید اجتناب کنید

اشتباه اول در استفاده از Vue.js: نادیده گرفتن سیستم واکنش پذیر ویو جی‌اس¹Vue’s Reactivity System

یکی از ویژگی‌های اصلی ویو جی‌اس سیستم واکنش‌پذیر آن است. این ساختار هنگامی که داده‌های سایت²state تغییر می‌کند صفحه نمایش سایت³view را به صورت خودکار تغییر می‌دهد. اما اشتباه تازه‌کارها این است که توقع دارند در خصوص داده‌هایی که واکنش‌پذیری برای آنها تعریف نشده است، این اتفاق رخ دهد. مثلا کد زیر را در نظر بگیرید:

const cookiesAccepted = computed(()=>{
    return localStorage.getItem("cookieConsent")
})

همان‌طور که مشاهده می‌کنید، در اینجا ما مقدار این ویژگی محاسبه‌شده⁴computed property را بر اساس متغیری که واکنش‌پذیر⁵reactive نیست، تعریف کرده‌ایم. در این حالت نمی‌توان انتظار واکنش پذیری از Vue.js داشت.

پس اشتباهات رایج استفاده از Vue.js در اینجا این است که ما متغیر خود را به کمک reactive یا ref تعریف نکرده‌ایم. اگر می‌خواهیم تغییرات ما روی داده‌ها به صورت خودکار در صفحه نمایش سایت اعمال شوند، باید از این ابزارهای موجود در Vue.js استفاده کنیم.

اشتباه دوم: استفاده نادرست از ویژگی‌های محاسبه‌شده

در Vue.js ویژگی‌های محاسبه‌شده ابزار قدرتمندی هستند. کاربرد آن‌ها این است که مقادیر پویایی در کدهای ما ایجاد می‌کنند که به صورت خودکار بر اساس تغییرات سایر داده‌ها تغییر می‌کنند.

به نوعی وابسته به داده‌های دیگر هستند و مقدار خود را از آنها می‌گیرند. از اشتباهات رایج استفاده از Vue.js این است که از متودها⁶methods به جای ویژگی‌های محاسبه‌شده استفاده شود.
با این کار در سیستم Vue.js محاسبات غیرضروری صورت می‌گیرد. در نتیجه سایت ما از نظر سرعت و عملکرد بهینه دچار مشکل می‌شود. پس برای اجتناب از این اشتباه باید توجه داشته باشیم هنگامی که مقداری بر اساس مقدار متغیر واکنش‌پذیر دیگری قرار است در کد ما تعریف شود، از ویژگی‌های محاسبه‌شده برای آن استفاده کنیم.

اشتباه سوم از اشتباهات رایج استفاده از Vue.js: استفاده از v-if و v-for بر روی یک المان

از اشتباهات رایج استفاده از Vue.js این است که v-if و v-for را به صورت هم‌زمان بر روی یک المان در کد خود استفاده نمایید. این مسئله از این جهت اشتباه است که شرط درون v-if به متغیرهای تعریف‌شده در v-for دسترسی ندارد. در نتیجه اگر کدی مشابه کد زیر به کار ببرید با خطا مواجه می‌شوید:

<!--
This will throw an error because property "todo"
is not defined on instance.
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo.name }}
</li>

برای رفع این مشکل تا جایی که امکان دارد v-if را در المان‌های فرزند⁷nested element به کار ببرید. به عنوان راه‌کاری دیگر می‌توانید از ویژگی محاسبه‌شده کمک بگیرید و قبل از استفاده از v-for شرط‌ها و عملیات موردنظر خود را در این ویژگی محاسبه‌شده اعمال کنید. این راه‌کارها علاوه بر این که خوانایی کد شما را افزایش می‌دهند، باعث می‌شوند که مطمئن شوید شرط درون v-if به درستی اعمال می‌شود. در زیر این راه‌حل‌ها را درون کد مشاهده می‌کنید:

<template v-for="todo in todos">
    <li v-if="!todo.isComplete">
        {{ todo.name }}
    </li>
</template>

<!-- or -->

<template v-for="todo in completedTodosComputedProp">
    <li>{{ todo.name }}</li>
</template>

اشتباه چهارم : استفاده نکردن از کامپوننت‌ها در Vue.js

در واقع سیستم کامپوننت‌ها⁸Component System در ویو جی‌اس برای این طراحی شده است که توسعه‌دهندگان بتوانند کدها را به خوبی سازمان‌دهی کنند. به خصوص در مواردی که کدی یکسان نیاز به استفاده مجدد در بخش‌های دیگر پروژه دارد، این سیستم کامپوننت‌ها بسیار مناسب است. اما متأسفانه از اشتباهات رایج استفاده از Vue.js این است که برخی افراد زیاد از این سیستم استفاده نمی‌کنند. در واقع با استفاده از کامپوننت‌ها و ایجادکردن آن‌ها، نه تنها ساختار کدنویسی پروژه بهتر مدیریت می‌شود، بلکه سیستم واکنش‌پذیری و چرخه‌های⁹lifecycle hooks به کار رفته در ویو جی‌اس نیز بهتر عمل می‌کنند.

اشتباه پنجم: فراموشی در پاک کردن اثرات جانبی کامپوننت

ممکن است در کدهای خود از listener ها یا custom event ها یا … استفاده کنید. در هنگام استفاده از این‌گونه موارد یا کتابخانه‌هایی که سایر توسعه‌دهندگان ایجاد کرده‌اند، برخی اثرات جانبی در ساختار وب‌سایت به وجود می‌آید. باید توجه داشته باشید که این‌گونه اثرات را در کد خود پاک کرده و از بین ببرید. زیرا در غیر این‌صورت تأثیر مخرب در حافظه و عملکرد سایت می‌گذارند. مثلا کد زیر را در نظر بگیرید:

<!-- Now.vue -->
<script setup>
import { ref } from 'vue';
const now = ref(new Date().toLocaleString());
setInterval(() => {
    now.value = new Date().toLocaleString();
}, 1000);
</script>
<template>
    {{ now }}
</template>

اگر این کد را در یک صفحه سایت به کار ببرید و کاربر سایت از این صفحه عبور کند و به صفحات دیگر برود باز هم اثر تابع interval باقی می‌ماند. در حالی که با عبور کاربر از صفحه این کد، دیگر نیازی به محاسبه زمان نبوده و این تابع باید متوقف شود.

در Vue.js برای اجتناب از این اشتباه رایج چرخه‌ای به نام unmounted ایجاد شده است. برای مثال فوق با به‌کارگیری کدی به شکل زیر می‌توانید مطمئن شوید که کامپوننت مربوطه اثرات جانبی را پاک کرده و دیگر فرآیندی در پس‌زمینه در حالت اجرا باقی نمی‌ماند:

onUnmounted(() => clearInterval(interval));

البته برای پاک‌کردن چنین اثراتی راه‌های دیگری هم وجود دارد. مثلا می‌توانید از کتابخانه VueUse استفاده کنید.

جمع‌بندی

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

پاورقی:

• 1
  Vue’s Reactivity System
• 2
  state
• 3
  view
• 4
  computed property
• 5
  reactive
• 6
  methods
• 7
  nested element
• 8
  Component System
• 9
  lifecycle hooks