سوالات متداول در مورد Composition API Vue js

در Vue 2 برای اینکه بتوانیم از کدهای بالا در کامپوننت های دیگر نیز استفاده کنیم سه راه وجود دارد. به عبارتی باید یک productSearchMixin و یک resultSortMixin بسازیم و سپس این دو mixin را وارد کامپوننت مورد نظر کنیم. با استفاده از Mixin ها می توانیم کدهایمان را بر اساس قابلیت دسته بندی کنیم که مثل Composition API باعث مرتب شدن کدها می شود اما ممکن است به مشکلات conflict of name (تکراری بودن نام mixin ها) برخورد کنیم. از طرف دیگر رابطه بین این mixin ها نیز مشخص نیست و اگر کسی به آن ها نگاه کند متوجه تعامل بین آن ها نخواهد شد. در نهایت، mixin ها قابلیت reusability (استفاده مجدد) صد در صد ندارند بنابراین به معنای واقعی کلمه reusable نیستند. در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود.

توجه داشته باشید که code reuse (استفاده مجدد از یک کد) با code duplication (کپی کردن یا نوشتن کدهای تکراری) تفاوت دارد. Code reuse یعنی به اشتراک گذاری یک کد برای استفاده در قسمت های مختلف برنامه، بنابراین یک قابلیت مثبت محسوب می شود اما code duplication یعنی تکرار بی هدف کدها در صورتی که می توانیم جلوی آن را بگیریم. رابطه بین code reuse و code duplication برعکس است یعنی هر چه قابلیت reuse (استفاده مجدد) بالاتر باشد، میزان کدهای تکراری (duplication) کاهش می یابد. یادتان باشد که کد بالا شکل کلی استفاده از composition API را نشان می دهد و syntax (نحو) واقعی نیست. ما در Vue 2 هر قابلیت را بر اساس عملیات های منطقی تقسیم می کردیم و نتیجه پراکنده شدن منطق اصلی برنامه بود اما در Vue 3 کدها را بر اساس کارایی آن ها تقسیم می کنیم که باعث پیوستگی منظم می شود. در ضمن این مسئله به معنی این نیست که تعداد کامپوننت های ما کمتر می شود.

این امر اصول DRY (تکرار نکنید) را ترویج می کند و تکرار کد را کاهش می دهد. طراحی شده با در ایران عزیز - کلیه‌ی حقوق نزد آکادمی آنلاین روکسو محفوظ است و هر گونه کپی‌برداری از مطالب، پیگرد قانونی دارد. اگر بخواهیم با استفاده از Vue 2 یک کامپوننت بسازیم، ممکن است به سه مشکل احتمالی برخورد کنیم. این سوالات متداول فرض بر آشنایی قبلی با Vue - به خصوص تجربه کار با Vue 2 با استفاده از Options API - را دارد. استفاده کنید computed خواص برای حالت مشتق شده که به سایر داده های واکنشی بستگی دارد.

در این روش ابتدا factory ها را تعریف کرده و آن ها را درون کامپوننت مورد نظر وارد می کنیم. سپس برایشان یک namespace تعریف کرده و تنظیمات مربوط به شخصی سازی را به آن ها پاس می دهیم تا دقیقا mixin مورد نظر ما را برایمان تولید کند. همچنین اگر بخواهیم خصوصیات (property) یک mixin را ببینیم باید به تعریف آن برگشته و دوباره کدها را بررسی کنیم. همچنین mixin factory ها قابلیت ساخته شدن به صورت پویا را ندارند بنابراین در زمان runtime نمی توانیم به نمونه (instance) های آن دسترسی داشته باشیم. همانطور که گفتیم در Vue 2 هیچ روش مناسبی برای code reuse یا استفاده مجدد از کدها بین کامپوننت های مختلف وجود ندارد.

اگر روی یک پروژه موجود با اجزای بسیاری که با استفاده از Options API ساخته شده‌اند کار می‌کنید، انتقال همه چیز به Composition API ممکن است بیش از ارزش آن تلاش کند. در چنین مواردی، شاید بهتر باشد به مرور زمان Composition API را در کامپوننت‌های جدید یا بخش‌های Refactor از پایگاه کد معرفی کنیم. Composition API با امکان استفاده از ویژگی های جاوا اسکریپت مانند بسته شدن، وارد کردن و صادر کردن توابع، و ترکیب چندین بخش منطق بدون محدود شدن توسط چرخه حیات کامپوننت، انعطاف بیشتری را ارائه می دهد. Composition API در Vue 3 راه جدیدی را برای سازماندهی و استفاده مجدد از کدها معرفی می کند و رویکردی انعطاف پذیرتر و قدرتمندتر را در مقایسه با Options API ارائه می دهد. این راهنما نگاهی عمیق به Composition API، مزایا و بهترین شیوه‌های آن ارائه می‌کند تا به شما کمک کند بهترین استفاده را از آن ببرید.

عوارض جانبی مانند واکشی داده یا شنوندگان رویداد را در داخل آن قرار دهید setup عملکرد با استفاده از قلاب چرخه عمر مانند onMounted و onUnmounted.

برخی از افراد تصور می کنند که استفاده از composition API به معنی کاهش تعداد کامپوننت ها است به طوری که هر صفحه وب درون composition function های مختلف نوشته می شود اما این مسئله اصلا صحیح نیست. برای ما هنوز هم هر صفحه به کامپوننت های مختلف تقسیم می شود و composition function ها فقط منطق هر کامپوننت را تشکیل می کنند. همانطور که می دانید نسخه بتا از ورژن سوم Vue.js چند وقتی است که منتشر شده و documentation آن روی سایت رسمی Vue قرار گرفته است. این نسخه جدید با تغییرات زیادی همراه بوده است که یکی از آن ها معرفی Composition API می باشد. ما در این مقاله می خواهیم به دلایل معرفی این API و چرایی استفاده از آن بپردازیم.

با اینکه هنوز کد ما شلوغ نشده است اما اگر قابلیت های دیگری مانند اضافه کردن فیلترهای جست و جو و pagination را نیز اضافه کنیم این کامپوننت بسیار شلوغ و نامنظم خواهد شد. مشکل اصلی اینجاست که قابلیت های یک برنامه در Vue 2 بر اساس component option ها (چیز هایی مثل components و data و props و methods و computed و غیره) مرتب می شوند. با این حساب قابلیت ما ممکن است بر اساس همین موارد تقسیم شود، یعنی یک کد جست و جوی ساده به 5 قسمت مختلف data و prop و methods و computed و lifecycle methods و امثال آن تقسیم شود. مشکل اصلی نیز همین است که تقسیم یک قابلیت ساده به 5 قسمت جداگانه باعث ناخوانایی کدها می شود. روش بهتر این است که هر قابلیت، قسمت مخصوص خودش را داشته باشد تا تکه های کد برای یک قابلیت خاص از هم جدا نشوند. Factory ها توابعی هستند که یک نسخه شخصی سازی شده و مخصوص به یک موقعیت خاص را برمی گردانند.

زمانی که نسخه سوم Vue.js از حالت beta خارج شده و ویرایش نهایی آن منتشر شود، آموزش کامل این فریم ورک محبوب را در روکسو خواهیم داشت بنابراین منتظر باشید و آن را از دست ندهید. در ورژن سوم Vue شاهد معرفی یک شیوه کاری جدید با نام Composition Api بودیم که به کلی روش توسعه در Vue را متحول می‌کند. در این مقاله به چیستی آن و این که آیا ارزش یادگیری دارد می‌پردازیم. اگر منطق مؤلفه شما ساده است و به راحتی در Options API مدیریت می شود، استفاده از Composition API ممکن است غیر ضروری باشد. Options API هنوز برای بسیاری از موارد استفاده، به خصوص در اجزای کوچکتر کاملاً معتبر است. منطق مرتبط را در توابعی که می توانند در اجزای مختلف دوباره استفاده شوند، محصور کنید.

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

برای بررسی چنین موردی باید با محدودیت های Vue 2 آشنا بشویم و سپس راه حل Vue 3 برای این مشکلات را بررسی کنیم. با پیروی از بهترین شیوه ها و درک زمان استفاده یا اجتناب از Composition API، می توانید برنامه های Vue.js قابل نگهداری و مقیاس پذیرتری بسازید. Composition API به شما این امکان را می دهد که منطق مرتبط را با هم به روشی ماژولارتر گروه بندی کنید. به جای تقسیم کد خود به قلاب‌های چرخه حیات و گزینه‌های مؤلفه، می‌توانید واحدهای منطقی را در توابع تعریف کنید و خواندن و نگهداری کد خود را آسان‌تر کنید. Composition API مجموعه ای از APIهای افزودنی مبتنی بر عملکرد است که به توسعه دهندگان اجازه می دهد تا منطق کد و حالت را در اجزای Vue بهتر مدیریت کنند. هدف آن رفع محدودیت های Options API با فعال کردن قابلیت استفاده مجدد کد و سازماندهی بیشتر، به ویژه در برنامه های بزرگتر است.